DIV CSS 佈局教程網

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

本章主要分為以下幾個部分

•正確理解響應式設計
•響應式設計的步驟
•響應式設計需要注意的問題
•響應式網頁布局實現原理

第一：正確理解響應式布局

響應式網頁設計就是一個網站能夠兼容多個終端-而不是為每個終端做一個特定的版本。打個比方來說：現在社會有很多響應產品，例如折疊沙發，折疊床等等，當我們需要把沙發放到一個角落的時候，此刻沙發就好比div吧，而角落裡的某個地方就好比父元素，由於父元素空間的改變，我們不得不調整div,讓它能夠依然放在角落裡。在項目中你會遇到不同的終端，由於終端分辨率不同，所以你要想讓用戶體驗更好，就必要讓你的頁面能夠兼容多個終端。

第二：響應式設計的步驟

了解了什麼是響應式，那麼接下來我們就要說說響應式設計的步驟，有人這時候會說“博主，你傻啊，響應式設計的步驟不就是1.編寫非響應式代碼、2.加工成響應式代碼、3.響應式細節處理、4.完成響應式開發嗎？”博主菊花一震 原來高手在民間啊，微微一硬表示敬重，我去 ，說錯了 是微微一笑，大家不要誤會啊。

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

1.布局及設置meta標簽

當創建一個響應式網站，或者非響應式網站變成響應式的時候，首先要關注元素的布局。我在創建響應式布局的時候習慣先寫非響應式布局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完成了非響應式那麼我在去添加媒體查詢（Media Query)和響應式代碼。這種操作更容易實現響應式特性。

當你完成當你已經完成了無響應的網站，做的第一件事是在你的 HTML 頁面，粘貼下面的代碼到和標簽之間。這將設置屏幕按1：1的尺寸顯示，在 iPhone 和其他智能手機的浏覽器提供網站全視圖浏覽，並禁止用戶縮放頁面。

XML/HTML Code復制內容到剪貼板

1. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">  
2. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
3. <meta name="HandheldFriendly" content="true">  
4. user-scalable屬性能夠解決ipad切換橫屏之後觸摸才能回到具體尺寸的問題。  

2.通過媒體查詢來設置樣式media query

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

XML/HTML Code復制內容到剪貼板

1.  @media screen and (max-width:980px){   
2.      #head { … }   
3.      #content { … }   
4.      #footer { … }   
5. }這裡面的樣式會覆蓋掉之前所定義的樣式。  

3.設置多種視圖寬度

假如我們要兼容ipad和iphone視圖，我們可以這樣設置：

XML/HTML Code復制內容到剪貼板

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

3.字體設置

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

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

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

XML/HTML Code復制內容到剪貼板

1. html{font-size:100%;}   
2. 完成後，你可以定義響應式字體：   
3. @media (min-width:640px){body{font-size:1rem;}}   
4. @media (min-width:960px){body{font-size:1.2rem;}}   
5. @media (min-width:1200px){body{font-size:1.5rem;}}   
6. 不理解rem的童鞋，在這裡給大家推薦一篇寫的不錯的博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)  

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

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

XML/HTML Code復制內容到剪貼板

1. #head{width:100%;}   
2. #content{width:50%;}  

2.圖片處理

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

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

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

XML/HTML Code復制內容到剪貼板

1. #wrap img{   
2.         max-width:100%;   
3.         height:auto;   
4.     }   
5.     如此設置後ID為wrap內的圖片會根據wrap的寬度改變已達到等寬擴充，height為auto的設置是為了保證圖片原始的高寬比例，以至於圖片不會失真。  

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

XML/HTML Code復制內容到剪貼板

1. #log a{display:block;   
2.             width:100%;   
3.             height:40px;   
4.             text-indent:55rem;   
5.             background-img:url(logo.png);   
6.             background-repeat:no-repeat;   
7.             background-size:100% 100%;   
8.             }   
9.     background-size是css3的新屬性，用於設置背景圖片的大小，有兩個可選值，第一個值用於指定背景圖的width,第2個值用於指定背景圖的height,如果只指定一個值，那麼另一個值默認為auto。   
10.     background-size:cover; 等比擴展圖片來填滿元素   
11.     background-size:contain; 等比縮小圖片來適應元素的尺寸  

最後我們來總結下響應式布局的實現原理

首先我們應該遵循移動端優先，交互和設計以移動端為主，pc則作為移動端的擴展，一個頁面需要兼容不同終端，那麼有兩個關鍵點是我們需要去做到響應式的：響應式布局和響應式內容（圖片、多媒體）

XML/HTML Code復制內容到剪貼板

1. 1.響應式布局   
2.     1.Meta標簽定義   
3.     2.使用Media Queries適配對應樣式   
4. 2.響應式內容   
5.     1.響應式圖片   

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

XML/HTML Code復制內容到剪貼板

1. git html 代碼https://github.com/lifenglei/mygit/blob/master/xiang.html   
2. css代碼 https://github.com/lifenglei/mygit/blob/master/xiang.css  

好了 博主絞盡乳汁的成果就在這裡了，下次我會總結下移動端的布局。

以上這篇響應式布局總結(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/dreamsboy/archive/2016/07/09/5656009.html