響應式布局的開發基礎知識

言歸正傳，博主因為是刨根問底攔不組的，所以在此就往響應式設計的祖墳上刨，深入了解下這四個步驟。

1.布局及設定meta標籤

當建立乙個響應式**，或者非響應式**變成響應式的時候，首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完成了非響應式那麼我在去新增**查詢（media query)和響應式**。這種操作更容易實現響應式特性。

當你完成當你已經完成了無響應的**，做的第一件事是在你的 html 頁面，貼上下面的**到和標籤之間。這將設定螢幕按1：1的尺寸顯示，在 iphone 和其他智慧型手機的瀏覽器提供**全檢視瀏覽，並禁止使用者縮放頁面。

user-scalable屬性能夠解決ipad切換橫屏之後觸控才能回到具體尺寸的問題。2.通過**查詢來設定樣式media query

media query 是響應式設計的核心，它能夠和瀏覽器進行溝通，告訴瀏覽器頁面如何呈現，假如乙個終端的解析度小於980px，那麼可以這樣寫

@media screen and (max-width:980px)
#content 
#footer 
}這裡面的樣式會覆蓋掉之前所定義的樣式。

3.設定多種檢視寬度

假如我們要相容ipad和iphone檢視，我們可以這樣設定：

/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
@media only screen and (width:320px)and (width:768px){}

3.字型設定

到目前為止，開發人員用到的字型單位大部分都是畫素，雖然畫素在普通**上是ok的，但是我們仍然需要響應式字型。乙個響應式的字型應關聯它的父容器的寬度，這樣才能適應客戶端螢幕。

css3引入了新的單位叫做rem,和em類似但對於html元素，rem更方便使用。

rem是相對於根元素的，不要忘記重置根元素字型大小：

html
完成後，你可以定義響應式字型：
@media (min-width:640px)}
@media (min-width:960px)}
@media (min-width:1200px)}
不理解rem的童鞋，在這裡給大家推薦一篇寫的不錯的部落格(

4.響應式設計需要注意的問題

1.寬度不固定，可以使用百分比

#head

#content

2.處理

在這裡我給大家一把鑰匙,有人會說，博主，能不能別裝逼？處理還有啥鑰匙，你以為是開門啊，博主，醒醒吧

哎喲，我這暴脾氣，我說的鑰匙不是真的鑰匙，而是指處理的萬能方法，是什麼呢？就是液態化。接著會有人問：「什麼是液態化」呢？這個問題問的很好，給你打99分，多給你一分怕你驕傲，大家都知道水無形能適合很多容器，那麼假如我們把當做水是不是就可以實現自適應問題了呢？

在html頁面中的，比如文章裡插入的我們都可以通過css樣式max-width來進行控制的最大寬度，如：

#wrap

img 如此設定後id為wrap內的會根據wrap的寬度改變已達到等寬擴充，height為auto的設定是為了保證原始的高寬比例，以至於不會失真。

除了img標籤的外我們經常會遇到背景，比如logo為背景：

#log a background-size是css3的新屬性，用於設定背景的大小，有兩個可選值，第乙個值用於指定背景圖的width,第2個值用於指定背景圖的height,如果只指定乙個值，那麼另乙個值預設為auto。 background-size :cover; 等比擴充套件來填滿元素 background-size

:contain; 等比縮小來適應元素的尺寸

1.響應式布局 1.meta標籤定義 2.使用media queries適配對應樣式 2.響應式內容

1.響應式

我知道各位還在期待什麼，無圖無真相，無dome不是瞎說嗎，紙上談兵，放心各位，博主不會這麼討打的下面就貢獻出個人製作的響應式布局dome.

日期：2016-09-20

人氣:36980

響應式布局簡明示例，響應式布局最好同時也是自適應布局，然後再配合css3**查詢，來達到完美的響應式布局。

響應式布局簡明示例，響應式布局最好同時也是自適應布局，然後再

配合css3**查詢，來達到完美的響應式布局。

css3**查詢語法：

/*@media screen and (min-width:1440px) and (max-width:1600px){}*/

@media screen and (min-width:1440px)

}@media screen and (max-width:1024px)

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

@media screen and (max-width:360px)

@media screen and (max-width:320px)

看了這幾個寫法是不是感覺響應式布局不過如此，哈哈，其實就是這麼簡單。

別急，在仔細想想好像還少點啥，比如在移動端、手機上開啟這個網頁的話，如果做響應式布局，還要在head區域加上如下**：

width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no 大概意思是，網頁寬度採用裝置寬度，縮放比例為1，不允許使用者縮放操作，

以上的頭部宣告是手機端頁面的標配。

懶人建站認為響應式布局最好是先做最簡單版本，然後再擴充套件成複雜版本，這樣做的好處的在手機上訪問的時候可以只載入簡單版本的js和css檔案，而在pc端寬屏上將會載入複雜的龐大的js和css檔案。

如果你真的要做響應式布局響應到手機端的話，對於字型字型大小的選擇推薦使用rem做為單位，

設定如下：

html

使用的時候，如果你要設定乙個16px的字型大小，用rem字型大小表示就是 1.6rem，font-size:2em; == font-size:20px;

git html ** /mygit/blob /master/xiang.html css** /mygit/blob

/master/xiang.css

響應式布局的開發基礎知識

響應式布局的開發基礎知識

響應式布局的開發基礎

響應式布局的知識

相關推薦