CSS -在所有屏幕大小的视口下渲染10%的图像
CSS -在所有屏幕大小的视口下渲染10%的图像
提问于 2017-11-11 17:33:32
我有一个我正在建设的网站的移动布局，其中移动屏幕的图像必须始终显示在它的导航按钮。下面是图像外观的设计样机
我使用媒体查询，图像的宽度和页边距顶部来定位它根据样机。但在某些视口，图像完全显示在屏幕上方，这主要是因为不同的视口导致我使用的基于百分比的单位的值不同。下面是我想要传达的内容的示例图像：
是否有更好的方法来定位此图像，使其始终显示在导航栏中，以便位置至少在特定的视口范围内是一致的，如果不是每个视口？
任何帮助都是非常感谢的。
.mobile-phone-img {
display: block;
margin: 3% auto 0;
width: 70%;
}
@media screen and (min-width:24em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 85%;
}
}
@media screen and (min-width:25.75em) {
.mobile-phone-img {
margin: 11.5% auto 0;
width: 66%;
}
}
@media screen and (min-width:30em) {
.mobile-phone-img {
margin: 11.5% auto 0;
width: 60%;
}
}
@media screen and (min-width:37.5em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 65%;
}
}
@media screen and (min-width:42em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 55%;
}
}
@media screen and (min-width:48em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 50%;
}
}
@media screen and (min-width:50em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 45%;
}
}
@media screen and (min-width:55em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 40%;
}
}<div class="mobile-card">
<h2>
Tracker
</h2>
<a target="_blank" href="https://play.google.com/store/apps/details?id=tracker.gst.in.gsttracker">
<img src="images/getOnGooglePlay.png" class="mobile-button">
</a>
<img src="images/gst-tracker-pixel.png" class="mobile-phone-img">
</div>
回答 1
Stack Overflow用户
发布于 2017-11-11 20:02:30
用于几乎所有设备的众所周知的媒体查询解析。
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
//CSS
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
//CSS
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
//CSS
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
//CSS
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
//CSS
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47236418
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号