CSS媒體查詢技巧

Question

我正在使用媒體查詢編寫網站來處理移動版本。有沒有可能有主css文件輸出這個

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

然後手機CSS文件輸出這內：

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

而且是有可能隱藏與媒體查詢的文本？

Answer 1

不完全，沒有。但是你可以有ul和li，它們是display: block（前者的例子）或display: inline（後者）。

<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

你可以在你的iphone樣式表中簡單地設置br {display:none}，您還可以使用::after但我不確定是否可以把非中斷空格在::after聲明content部分添加信息。

除此之外，如果您隱藏br標記，則沒有掛鉤可以添加任何內容。

我會建議首先找到非語義的html，這會讓所有的事情變得更容易。

Answer 3

你寫的方式是不可能的：CSS不會重寫你的HTML，它只會改變文檔的表示方面。最好的方法是編寫'語義'HTML，即包含文檔結構但不包含佈局的HTML，然後使用CSS來定義它將如何佈置。

在你的榜樣，你可能希望div包含項目的列表，以便做合乎邏輯的做法是使用一個<ul>，而不是<div>和<li>而不是單個文本項，如：

<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。