Question

我有一个像这样的HTML

    <div class="movies">
  <ul>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
 </ul>
</div>

和css一样

.movies {
   overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
   overflow-y: hidden;
   border: 5px solid #8;
   white-space: nowrap;
   margin-top:5px;

}

.item {
background-color:#eee;
border: 5px solid #888;
border-radius:3px;
height: 200px;
width: 30%;
display: inline-block;
overflow: hidden; 
margin-right: 5px;
}

因为我使用了宽度：30％;它适用于iPhone和其他小型设备，但对于桌面浏览器，整个屏幕宽度的30％变得太大。如何针对所有平台适当缩放列表？

Answer 1

您必须使用不同屏幕尺寸的媒体查询来定位屏幕尺寸... 对于iphone

@media only screen 和（最小设备宽度：375px）和（最大设备宽度：667px）和（方向：风景）和（-webkit-min-device-pixel-ratio：2） {}

@media only screen 和（最小设备宽度：375px）和（最大设备宽度：667px）和（方向：肖像）和（-webkit-min-device-pixel-ratio：2） {

}

和桌面版..

@media only screen（max-width：1080）{

}

在移动和桌面浏览器上缩放html的问题

1 个答案: