문제 모바일 및 데스크톱 브라우저

Question

에 HTML을 확장에 나는이

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

등이

<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와 같은 HTML을 가지고 : 30 %; iPhone 및 기타 소형 장치에서는 잘 작동하지만 데스크탑 브라우저에서는 전체 화면 너비의 30 %가 너무 커집니다. 모든 플랫폼에서 목록을 적절하게 확장하려면 어떻게해야합니까? (: 375px 분 기기 폭) 및 (MAX-장치

Answer 1

당신은 아이폰

@media 만 화면 및 다른 secreen 크기 미디어 쿼리 ... 을 사용하여 화면의 크기를 타겟팅 할 - 폭 : 667px) 및 (방향 : 가로) 및 (-webkit 분 기기 화소 비율 : 2) {}

@media 전용 화면과 (최소 소자 폭 : 375px) 및 (최대 기기 - 폭 : 667px) 및 (방향 : 세로)과 (-webkit 분 기기 화소 비율 : 2) {

}

데스크톱 버전

..

@media 만 화면 (최대 폭 : 1,080) {

}