響應CSS改善問題

我開始寫在CSS的移動版本，我問你這是更好的辦法：響應CSS改善問題

在HTML寫div其中有一類桌面和另一div其中有一類移動。並從零開始構建。例如：

<div class="container-fluid bg-1 desktop1"> 
 
\t <div class="container"> 
 
\t \t <div class="col-xs-5 despre-noi-text first-section"> 
 
\t \t \t <h2>asdfsdfdf</h2> 
 
\t \t \t <p class="despre-paragraph"> 
 
      adsdadd 
 
      </p> 
 
    \t \t </div> 
 
    \t \t <div class="col-xs-7 despre-noi-img second-section"></div> 
 
\t </div> 
 
\t 
 
</div> 
 
<div class="container-fluid mobile1"> 
 
\t <div class="container"> 
 
\t \t <div class ="row mobile-row"> 
 
\t \t \t <div class="col-xs-12 mobile1-img"></div> 
 
\t \t </div> 
 
\t \t <div class ="row mobile-row"> 
 
\t \t \t <div class="col-xs-12 mobile1-text"> 
 
\t \t \t \t <h2>asdfsdffdfsfsdf</h2> 
 
\t \t \t \t <p class="mobile1-despre-paragraph"> 
 
\t    \t \t asdfdfdfd 
 
\t    </p> 
 
\t    <p class="mobile1-despre-paragraph2">saddfsdfsdfsdfd</p> 
 
\t \t \t </div> 
 
    \t \t </div> 
 
\t </div> 
 
</div>

此後，我將與媒體查詢的移動解決哪些類將被隱藏，並且將不會隱藏檢查。

@media only screen and (max-width : 480px) { 
 

 
\t .desktop1 \t { display:none; } 
 
\t .mobile1 \t { display:block; } 
 
}

，或者覆蓋所有媒體查詢的類的？

來源

2015-02-12 Jozsef Naghi

或者可能使用'hidden-xs'類（<768px）？ – dfsq 2015-02-12 08:44:11

我會去重寫類。這將有助於減少重複信息的HTML代碼。然後在mediaquerie中檢查寬度並覆蓋它全部，imo。例如，如果我有菜單，我會選擇第一個選項。 – Cheshire 2015-02-12 08:55:02

ideea是桌面設計，與手機版本不一樣。當然，顏色和文字是一樣的。如果我選擇覆蓋clasess，我必須寫很多絕對的css位置並禁用大量的float。這是明智的嗎？這將是一個完全的CSS亂碼 – 2015-02-12 09:00:28

絕對使用媒體查詢來覆蓋默認屬性。保持代碼乾爽和易於維護通常是一個很好的原則。有兩個版本的HTML塊意味着不必要的重複（意味着需要將更多的代碼加載到瀏覽器中），並且在將來的維護中需要更多的代碼。

使用查詢來覆蓋樣式不是性能問題 - CSS是爲級聯構建的。不要因爲利用它而感到不快（除非你沒有什麼理由加入不必要的規範）。

簡短的回答：節省自己的壓力。不要複製HTML。

來源

2015-10-16 13:32:04

響應CSS改善問題

回答

相關問題