響應式佈局的一些主要內容

一.什麼是響應式設計

　　在現今市場上的全部媒體設備上，你的網站都能正確的工做，並有良好的顯示效果。

二.建立響應式網站有哪些方面

　　1.HTML

　　　　使用HTML5標記，文檔類型聲明和初始縮放比，最大縮放比等等，具備清晰和語義化的HTML。

　　2.CSS

　　　　嵌入式樣式，注意層疊的做用方式和元素繼承規則。

　　　　盒模型：IE的盒模型和默認的chrome盒模型不一樣，注意區分

　　3.媒體查詢

　　　　容許咱們基於瀏覽網站的設備的特性來應對不一樣的樣式聲明，

@media only screen and (min-width: 40em){}//此處加上only是爲了支持一些老的瀏覽器
@<link rel="stylesheet" href="style/css.css" media="only screen and (min-width: 40em)">//在樣式表中加入媒體查詢屬性
<style media="only screen and (min-width:40em)"></style> //在頁面的style元素的media屬性中來包含媒體查詢
@media url(styles.css) only screen and (min-width: 40em;)//導入樣式表

　　　　能夠查詢視口寬度和高度，height,width,min-width,max-width。屏幕寬度和高度，device-width,device-height,設備屏幕的實際寬度和高度。方向，orientation，landscape(橫排)，portrait(豎排)。寬高比，aspect-ratio視口寬高比，device-aspect-ratio設備屏幕寬高比。分辨率，resolution，未被chrome和safari支持。

　　4.瀏覽器支持

　　　　能夠添加條件註釋，缺點是增長額外的代碼，條件註釋出如今HTML中，能夠用他來爲IE8及其更早版本制定一個特定的樣式表，

1 <!-- [if (lt IE 9)&(!IEMobile)]
2 ...    //HTML代碼放在中間，link連接外部樣式表
3 <![endif]> 

　　　　另外一個選擇是使用膩子腳本爲舊版本的IE添加媒體查詢支持，好比Respond.js一個快速，輕量級的爲IE6-8添加min-width和max-width支持的js膩子腳本肯定是會增長額外的代碼到網站中，在不支持js的瀏覽器中不起做用，且只能用於min-width和max-width

　　5.響應式設計

　　　　漸進加強理念：第一層以HTML定義語義結構第二層以CSS定義表現層第三層以JS定義行爲層。

 　　　　網格設計理念：著名的bootstrap中就是用的12列布局

　　6.圖像

　　　　圖像屬性中alt是必要的，title沒必要添加。能使用css來添加的圖像問題就不要使用圖像，

　　7.文本

　　　　使用rem或者em，溢出換行overflow-wrap:break-word;