空間上的移動也工作

假設我有類似：空間上的移動也工作

<div class="features small"> 
    <div class="content-inner"> 
     <h1>Lorem Ipsum</h1> 
     <div class="feature-items"> 
      <div class="feature"> 
       <img style="" src="icon1.png" /> 
       <div class="title"> 
        <h4>Title 1</h4> 
       </div> 
      </div> 
      <div class="feature"> 
       <img style="" src="icon2.png" /> 
       <div class="title"> 
        <h4>Title 2</h4> 
       </div> 
      </div> 
      <div class="feature"> 
       <img style="" src="icon3.png" /> 
       <div class="title"> 
        <h4>Title 3</h4> 
       </div> 
      </div> 
      <div class="feature"> 
       <img style="" src="icon4.png" /> 
       <div class="title"> 
        <h4>Title 4</h4> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

我怎麼可以設置每一個「功能」的div太在移動工作之間的一些空間呢？ Now'm我在快樂的CSS嘗試這樣的：

.feature { padding-right: 4rem; }

但對於移動我必須使用媒體查詢。如果我不想使用媒體？

來源

2015-10-28 Antonioz

不要ü要爲手機屏幕應用空間，而不使用媒體查詢CSS？ –

是的，我需要的是應用之間的空間。隨着填充權 - 它適用於（在桌面上），但很顯然，我必須爲移動設置媒體查詢。但是，如果我不想使用媒體查詢？ – Antonioz

你可以調用指定屏幕的css文件。 <鏈路的rel = 「樣式表」類型= 「文本/ CSS」媒體= 「僅屏幕和（MAX-設備寬度：480像素）的」 href = 「MOBIEL-device.css」/> –

我建議只將填充在桌面斷點，並在桌面不設樣式，然後覆蓋移動。這是級聯中的反模式。

所以我只是做：

@media screen (min-width: 64em) { 
    .feature { padding-right: 4rem; } 
}

沒有辦法，我知道的，而無需使用媒體查詢可言，除非你改變與爵士的風格 - 這似乎有點小題大做了你想什麼去做。我寫了一篇關於移動第一個CSS模式一點點在這短短的帖子：

http://mrmrs.io/writing/2014/08/18/mobile-first-css/

來源

2015-10-28 10:48:17 mrmrs

謝謝，它的工作原理！ – Antonioz

空間上的移動也工作

回答

相關問題