Блог

У меня есть плавающий баннер, я хочу отображать более 50% ширины больших экранов и 100% ширины маленьких экранов (мобильные устройства).

Изображение иногда очень маленькое (я думаю, на дисплеях retina).

Как я могу улучшить свой код для корректного отображения на дисплеях retina, больших экранах и экранах небольших мобильных устройств?

В .css

 .banner-sticky {
bottom: -2.5px;
left: 0px;
width: 100%;
text-align: center;
background: rgb(0, 0, 0) transparent;
background: rgba(0, 0, 0, 0);
/* filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";*/
}

.advert-img {
width: 50%
height: auto;
}
@media screen and (max-width: 380px) and (orientation: portrait) {
.advert-img {
width: 100%;
}
}
  

В файле .html

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
.
.
.
<div id="sticky" class="banner-sticky" style="position: fixed;">
  <a id="ad-link" href=' #' ><span id="banner-ad"><img src=' foo.jpg' class="advert-img" /></a>
</div>


'<a id="ad-link" href='   this.landingUrl   ' ><span id="banner-ad"><img src='   this.imgSrc   ' class="advert-img" /></a>'
  

Вы можете использовать медиа-запросы CSS, чтобы различать ширину экрана, например, так:

 body {
  background: url(foo-small.jpg);
}
@media (min-width: 500px) {
  body {
    background: url(foo-medium.jpg);
  }
}
@media (min-width: 800px) {
  body {
    background: url(foo-large.jpg);
  }
}
  

Чтобы это сработало, вам нужно установить изображение в качестве фона в CSS, а не в качестве <img> тега

Попробуйте использовать правило css размера фона для каждого разрешения

 body {
  background: url(foo-small.jpg);
}
@media (min-width: 500px) {
  body {
    background-size:50%;
  }
}
@media (min-width: 800px) {
  body {
    background-size:80%;
  }
}