我們網頁中有時候需要做適配，在不同屏幕中將樣式按照另一種布局來顯示

廢話不多說 看代碼

當你的屏幕寬度小于等于360px并且大于等于321px則調用該括號里面的css代碼 
@media screen and (max-width: 360px) and (min-width: 321px){ /* 你的css代碼 html{ font-size: 18px; }*/ }

以上的數字大家可以按照自己的定義去修改 你學會了嗎？

篇文章主要介紹下如何使網站自適應屏幕的大小。其實，這個問題并不是很難做，可以使用CSS來實現。

具體操作實例小編在下面已經寫出來了：

<div id="change-color"></div>

css 代碼如下：

#change-color {

width:300px;

height:300px;

margin:50px auto;

background:red;

}

這個很簡單，大家都能想象出來是一個多么枯燥的頁面，一個 300 × 300 像素的紅色正方形在頁面的中上部。學到這里的同學對于這樣簡單的代碼應該是無壓力的了。然后我們在這段 css 后面再加上一點內容，改做：

#change-color {

width:300px;

height:300px;

margin:50px auto;

background:red;

}

@media (max-width:800px){

#change-color {

width:90%;

height:300px;

margin:50px auto;

background:blue;

}

}

來一起看看這個css，這段可以分作兩個部分，第一部分就是我們上面寫的對 #change-color 定義的 css ，這個無需解釋了。第二部分跟我們以前看到的不一樣哈，但是如果去掉 @media (max-width:800px){……} 這樣的結構之后，我們可以發現，剩下的內容也是對 #change-color 的定義，只是跟上面略有不同，一個是寬度發生了變化，一個是背景色改了。那么現在我們來解釋一下這部分代碼。

默認情況執行第一部分的定義，那么背景色就應該是紅色的，寬度是300px。一切如同我們與想的一樣。當瀏覽器內容部分的寬度小于等于800px（符合條件，最大寬度為800px）時，使用第二部分的定義，也就是寬度變成了90%，背景色變成了藍色。

然后我們看看實際效果：當網頁寬度大于800px，網頁自適應寬屏。

調整窗口寬度到內容區域小于800px，網頁適應屏幕窗口調整，這樣現在效果實現了。

本篇屬于暢想網絡原創，轉載地址：http://www.e-wkj.cn/xw/1824.html

用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。

實例

如果瀏覽器窗口小于 500px, 背景將變為淺藍色：

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

body {

background-color: lightblue;

}

}

添加斷點

在先前的教程中我們使用行和列來制作網頁，它是響應式的，但在小屏幕上并不能友好的展示。

媒體查詢可以幫我們解決這個問題。我們可以在設計稿的中間添加斷點，不同的斷點有不同的效果。

桌面設備

手機設備

使用媒體查詢在 768px 添加斷點：

實例

當屏幕 (瀏覽器窗口) 小于 768px, 每一列的寬度是 100%:

/* For desktop: */

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

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

/* For mobile phones: */

[class*="col-"] {

width: 100%;

}

}

為移動端優先設計

移動端優先意味著在設計桌面和其他設備時優先考慮移動端的設計。

這就意味著我們必須對 CSS 做一些改變。

我們在屏幕小于 768px 進行樣式修改，同樣在屏幕寬度大于 768px 時也需要修改樣式。以下是移動端優先實例：

/* 為移動端設計: */

[class*="col-"] {

width: 100%;

}

@media only screen and (min-width: 768px) {

/* For desktop: */

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

}

其他斷點

你可以根據自己的需要添加斷點。

我們同樣可以為平板設備和移動手機設備設置斷點。

桌面設備

平板設備

手機設備

在屏幕為 600px 時添加媒體查詢，并設置新的樣式（屏幕大于600px但小于768px）：

實例

注意兩組類樣式是相同的，但名稱不同 (col- 和 col-m-):

/* For mobile phones: */

[class*="col-"] {

width: 100%;

}

@media only screen and (min-width: 600px) {

/* For tablets: */

.col-m-1 {width: 8.33%;}

.col-m-2 {width: 16.66%;}

.col-m-3 {width: 25%;}

.col-m-4 {width: 33.33%;}

.col-m-5 {width: 41.66%;}

.col-m-6 {width: 50%;}

.col-m-7 {width: 58.33%;}

.col-m-8 {width: 66.66%;}

.col-m-9 {width: 75%;}

.col-m-10 {width: 83.33%;}

.col-m-11 {width: 91.66%;}

.col-m-12 {width: 100%;}

}

@media only screen and (min-width: 768px) {

/* For desktop: */

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

}

以上代碼看起來很多余，但是他可以根據屏幕大小自動設置不同的樣式，所以還是非常必要的。

HTML 實例

針對桌面設備:

第一和第三部分跨越 3 列。中間部分跨域 6 列。

針對平板設備:

第一跨域 3列，第二部分跨越 9 列，第三部分跨域 12 列：

<div class="row">

<div class="col-3 col-m-3">...</div>

<div class="col-6 col-m-9">...</div>

<div class="col-3 col-m-12">...</div>

</div>

方向：橫屏/豎屏

結合CSS媒體查詢,可以創建適應不同設備的方向(橫屏landscape、豎屏portrait等)的布局。

語法：

orientation：portrait | landscape

• portrait：指定輸出設備中的頁面可見區域高度大于或等于寬度

• landscape： 除portrait值情況外，都是landscape

實例

如果是豎屏背景將是淺藍色：

@media only screen and (orientation: landscape) {

body {

background-color: lightblue;

}

}

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！