使用css3的響應式設計

Question

我正在嘗試使用媒體查詢。我在頭腦中添加了meta name =「viewport」content =「width = device-width，initial-scale = 1」>和@media（min-width：768px）{background-color：red; } 在我的CSS。有什麼我失蹤，因爲這不起作用。

Answer 1

你的媒體查詢是好的，但你的背景顏色只是一個CSS屬性，你必須指定哪些因素有關：

@media (min-width: 768px) { 
    html, body { 
     background-color: red; 
    } 
} 

Answer 2

您標記這是利用上海社會科學院以及響應式設計，所以如果其他人將來有相關的問題，我認爲提供更詳細的，以SASS爲導向的答案是適當的。

首先，@ migli說的一切都是真實的 - 你必須確保你的目標是一個特定的DOM元素，以在你的CSS中進行樣式化。使用SASS的一個主要好處是它可以讓你的代碼保持乾爽，並且創建斷點使得編寫媒體查詢變得非常簡單。

要做到這一點，建立一個@mixin它建立您的具體斷點閾值（例如這裏是一個easy-to-follow general-purpose example由Tim騎士：

@mixin breakpoint($class) { 
    @if $class == xs { 
    @media (max-width: 767px) { @content; } 
    } 

    @else if $class == sm { 
    @media (min-width: 768px) { @content; } 
    } 

    @else if $class == md { 
    @media (min-width: 992px) { @content; } 
    } 

    @else if $class == lg { 
    @media (min-width: 1200px) { @content; } 
    } 
} 

現在，當你編輯SASS文件，你可以劃分你碼，以保持它DRY例如，以下SASS：

body { 
    height: 100%; 
    width: 100%; 
    font-size: 1.8em; 
    @include breakpoint(md) { 
    font-size: 1.5em; 
    } 
} 

輸出

body { 
    height: 100%; 
    width: 100%; 
    font-size: 1.8em; 
} 

@media (min-width: 992px) { 
    body { 
    font-size: 1.5em; 
    } 

這是一個小例子，但隨着項目規模和範圍的擴大，節省按鍵次數並提高可讀性將大大提高您的工作效率（以及理智！）。