響應式網頁佈局實現原理第一：正確理解響應式佈局css
什麼是響應式佈局？html
響應式網頁設計就是一個網站可以兼容多個終端-而不是爲每一個終端作一個特定的版本。打個比方來講：如今社會有不少響應產品，例如摺疊沙發，摺疊牀等等，當咱們須要把沙發放到一個角落的時候，此刻沙發就比如div吧，而角落裏的某個地方就比如父元素，因爲父元素空間的改變，咱們不得不調整div,讓它可以依然放在角落裏。在項目中你會遇到不一樣的終端，因爲終端分辨率不一樣，因此你要想讓用戶體驗更好，就必要讓你的頁面可以兼容多個終端。響應式設計的步驟css3
1.編寫非響應式代碼1.佈局及設置meta標籤git
當建立一個響應式網站，或者非響應式網站變成響應式的時候，首先要關注元素的佈局。我在建立響應式佈局的時候習慣先寫非響應式佈局，頁面固定寬度大小，我以爲這個對在座的各位沒有任何難度。若是完成了非響應式那麼我在去添加媒體查詢（Media Query)和響應式代碼。這種操做更容易實現響應式特性。github
當你完成當你已經完成了無響應的網站，作的第一件事是在你的 HTML 頁面，粘貼下面的代碼到和標籤之間。這將設置屏幕按1：1的尺寸顯示，在 iPhone 和其餘智能手機的瀏覽器提供網站全視圖瀏覽，並禁止用戶縮放頁面。chrome
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true">
user-scalable屬性可以解決ipad切換橫屏以後觸摸才能回到具體尺寸的問題。
2.經過媒體查詢來設置樣式media query瀏覽器
media query 是響應式設計的核心，它可以和瀏覽器進行溝通，告訴瀏覽器頁面如何呈現，假如一個終端的分辨率小於980px，那麼能夠這樣寫markdown
@media screen and (max-width:980px){
#head { … }
#content { … }
#footer { … }
}這裏面的樣式會覆蓋掉以前所定義的樣式。
3.設置多種視圖寬度iphone
假如咱們要兼容ipad和iphone視圖，咱們能夠這樣設置：ide
/**ipad**/ @media only screen and (min-width:768px)and(max-width:1024px){} /**iphone**/ @media only screen and (width:320px)and (width:768px){}
/**也能夠按需導入css文件**/
<link rel = "stylesheet" href = " " meida ="screen and (min-width:340px) and (max-width:720px)">
4.字體設置
到目前爲止，開發人員用到的字體單位大部分都是像素，雖然像素在普通網站上是Ok的，可是咱們仍然須要響應式字體。一個響應式的字體應關聯它的父容器的寬度，這樣才能適應客戶端屏幕。css3引入了新的單位叫作rem,和em相似但對於Html元素，rem更方便使用。rem是相對於根元素的，不要忘記重置根元素字體大小：
html{font-size:100%;}
完成後，你能夠定義響應式字體：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}
不理解rem的童鞋，在這裏給你們推薦一篇寫的不錯的博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)
5 表格的響應式佈局
// index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="index.css"/> <link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/> <link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/> </head> <body> <div class="header">頭部</div> <div class="main clearfix"> <div class="left">左邊</div> <div class="center">中間</div> <div class="right">右邊</div> </div> <div class="footer">底部</div> </body> </html> // index.css *{ margin:0; padding:0; text-align:center; color:yellow; } .header{ width:100%; height:100px; background:#ccc; line-height:100px; } .main{ background:green; width:100%; } .clearfix:after{ display:block; height:0; content:""; visibility:hidden; clear:both; } .left,.center,.right{ float:left; } .left{ width:20%; background:#112993; height:300px; font-size:50px; line-height:300px; } .center{ width:60%; background:#ff0; height:400px; color:#fff; font-size:50px; line-height:400px; } .right{ width:20%; background:#f0f; height:300px; font-size:50px; line-height:300px; } .footer{ width:100%; height:50px; background:#000; line-height:50px; } //index01.css .right{ float:none; width:100%; background:#f0f; clear:both; } .left{ width:30%; } .center{ width:70%; } .main{ height:800px; } //index02.css .left,.center,.right{ float:none; width:100%; }
效果圖
響應式設計須要注意的問題
1.寬度不固定，可使用百分比
#head{width:100%;}
#content{width:50%;}
2.圖片處理
使圖片液體化就能夠能夠實現圖片自適應。
在html頁面中的圖片，好比文章裏插入的圖片咱們均可以經過css樣式max-width來進行控制圖片的最大寬度，如：
#wrap img{ max-width:100%; height:auto; } 如此設置後ID爲wrap內的圖片會根據wrap的寬度改變已達到等寬擴充，height爲auto的設置是爲了保證圖片原始的高寬比例，以致於圖片不會失真。
除了img標籤的圖片外咱們常常會遇到背景圖片，好比logo爲背景圖片：
#log a{display:block; width:100%; height:40px; text-indent:55rem; background-img:url(logo.png); background-repeat:no-repeat; background-size:100% 100%; } background-size是css3的新屬性，用於設置背景圖片的大小，有兩個可選值，第一個值用於指定背景圖的width,第2個值用於指定背景圖的height,若是隻指定一個值，那麼另外一個值默認爲auto。 background-size:cover; 等比擴展圖片來填滿元素 background-size:contain; 等比縮小圖片來適應元素的尺寸
參考文章
（１）《響應式佈局總結》
（２）《如何使用rem單位》
（３）《H5頁面佈局之圖片液態化（自適應）處理簡述》
響應式佈局例子
git html 代碼https://github.com/lifenglei/mygit/blob/master/xiang.html css代碼 https://github.com/lifenglei/mygit/blob/master/xiang.css