最佳實踐在網站響應中使用SCSS編寫CSS

當我想創建一個響應式網站時，比如說有兩種不同屏幕的設備。我應該創建@media屏幕{}不同的文件，如下面的代碼：最佳實踐在網站響應中使用SCSS編寫CSS

@media screen and (min-width: 676px) {//Some code here}

或者直接對同一個文件@media屏幕{}？這個例子我的代碼：

.home { 
    .container { 
     padding: 10px 0 20px 0; 
     @media screen and (max-width: 480px) { 
      padding: 2px 0 10px 0 
     } 
    } 
}

並請包括例子作爲我的參考資料。

謝謝。

來源

2015-12-30 Fahrul - AFS

你可以試試下面的方法一個：

爲將要添加它底部的 scss文件中的所有元素

使用一個媒體查詢。
添加每個媒體查詢與它的元素，就像你一樣。我不喜歡這種方法，因爲在大型項目上工作時，它會使難以找到/編輯代碼。

實施例1

.section--about { 
    text-align: center; 

    p { 
    color: #727272; 
    } 
} 

@include mobile { 
    .section--about { 
    p { 
     font-size: 1.5em; 
    } 
    } 
}

Exmple 2

.section--about { 
    text-align: center; 

    p { 
    color: #727272; 
    } 

    @include mobile { 
    p { 
     font-size: 1.5em; 
    } 
    } 
}

進一步閱讀：

來源

2015-12-30 05:30:42 shadeed9

謝謝@ shadeed9 –

最佳實踐在網站響應中使用SCSS編寫CSS

回答

相關問題