CSS Media Query Tricks

Question

모바일 버전을 처리하기 위해 미디어 쿼리를 사용하여 웹 사이트를 작성하고 있습니다.

<div class="classname"> 
    Item 1&nbsp;&nbsp; 
    Item 2&nbsp;&nbsp; 
    Item 3&nbsp;&nbsp; 
    etc 
</div> 

또한 미디어 쿼리 텍스트를 숨길 수 있습니다 : 기본 CSS 파일 출력에게 전화 CSS 파일 출력이 내에서이

<div class="classname"> 
    Item 1<br /> 
    Item 2<br /> 
    Item 3<br /> 
    etc 
</div> 

그리고 다음을 가질 수 있을까?

Answer 1

꼭 그렇지는 않습니다. 그러나 (이전 예제의 경우) 또는 display: inline (후자의 경우) 중 어느 하나 인 이있는 ul을 가질 수 있습니다.

<ul class="classname"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 

case 1: 
ul.classname li { display: block } 

case 2: 
ul.classname li { display: inline; padding-right: 24px } 

Answer 2

당신은 단순히 당신의 아이폰 스타일 시트에 br {display:none}를 설정할 수 있습니다 당신은 또한 당신의 ::after 문의 content 부분에 줄 바꿈하지 않는 공백을 넣을 수있는 경우 ::after하지만 미안 확실하지를 사용하여 정보를 추가 할 수 있습니다.

br 태그를 숨기면 다른 태그를 추가 할 필요가 없습니다.

먼저 non-br html을 의미 론적으로 사용하는 것이 좋습니다. 이렇게하면 모든 것이 훨씬 쉬울 것입니다.

Answer 3

당신이 쓰는 방법은 불가능합니다. CSS는 HTML을 다시 작성하지 않고 단지 문서의 프리젠 테이션 측면을 변경합니다. 가장 좋은 방법은 'semantic'HTML, 즉 문서의 구조는 포함하지만 레이아웃은 포함하지 않는 HTML을 작성한 다음 CSS를 사용하여 레이아웃을 정의하는 방법을 정의하는 것입니다.

: 당신의 예에서

, 당신은 아마 할 수있는 논리적 인 것은이 대신 <div>의 <ul>, 대신 개별 텍스트 항목의 <li>, 예를 사용하는 것, 그래서 항목의 목록을 포함하도록 div을 원하는

<ul class="classname"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 

해당 마크 업을 사용하면 CSS를 사용하여 목록의 스타일을 지정할 수 있습니다. 그들 사이의 간격을 조금

모바일 브라우저를

ul.classname { 
    /* First, override browser defaults: */ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    text-indent: 0; 
} 

ul.li { 
    display: block; 
    padding: 0; 
    margin: 0; 
    text-indent: 0; 
} 

, 당신이 서로 옆을 할 수 있으며, 추가 : 데스크톱 브라우저를 들어, 당신은 아마 수직으로 항목을 표시 할

ul.li { 
    display: inline; 
    margin-right: 2em; 
} 

요소를 완전히 숨기려면 표준 CSS 기술인 display: none을 사용하십시오.