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

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;
}

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

Answer 1

您必须针对不同的屏幕尺寸使用媒体查询来定位屏幕尺寸 ...苹果手机

@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(最大宽度:1080){