我有一个浮动横幅,我想要显示超过50%的宽度的大屏幕和100%的宽度的小屏幕(移动设备)。它必须位于屏幕的底部,而不是内容的底部。
图像有时非常小(我认为是在视网膜显示器上)。
如何改进代码以在视网膜显示器、大屏幕和小移动设备屏幕上正确显示?
在.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>'
发布于 2014-07-04 12:23:59
使用媒体查询
对于视网膜,你可以使用@media screen and (min-resolution: 2dppx)
对于你似乎已经在使用的屏幕大小。您可以使用min-width
代替max-width
如果希望图像源根据屏幕大小而有所不同,可以使用srcset
属性。你可以在这里看到它的支持http://caniuse.com/srcset
如果你想要一个响应式的页面,你应该首先考虑css移动端。首先创建小屏幕的默认样式,然后添加大屏幕的查询。
https://stackoverflow.com/questions/24573826
复制相似问题