問題在移動設備和桌面瀏覽器

縮放的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; 
}

一個html因爲我用寬度：30 ％;它可以在iPhone和其他小型設備上正常工作，但對於桌面瀏覽器，整個屏幕寬度的30％變得太大。我怎樣才能爲所有平臺適當地調整列表？

來源

2014-11-24 hariszaman

如何約[媒體查詢？]（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries） – jbutler483 2014-11-24 10:05:08

是的，我可以使用，但然後我必須指定所有移動設備的寬度，並相應地更改每個樣式表？ – hariszaman 2014-11-24 10:10:10

那，或設置最大寬度的一切 – jbutler483 2014-11-24 10:10:50

你必須使用不同的secreen大小媒體查詢... 爲iPhone

@media只有屏幕和目標屏幕大小（最小的設備寬度：375px）和（最大設備-width：667px）和（取向：橫向）和（-webkit分鐘設備像素比：2） {}

@media只有屏幕和（最小 - 設備寬度：375px）和（最大設備-width：667px）和（方向：縱向）和（-webkit分鐘設備像素比：2） {

}

和用於桌面版本..

@media只有屏幕（最大寬度：1080）{

}

來源

2014-11-24 10:11:46 RamThakur

問題在移動設備和桌面瀏覽器

回答

相關問題