響應式佈局筆記

一. 佈局設計

1. 固定佈局：以像素做爲頁面的基本單位，無論設備屏幕及瀏覽器寬度，只設計一套尺寸；
2.  可切換的固定佈局：一樣以像素做爲頁面單位，參考主流設備尺寸，設計幾套不一樣寬度的佈局。經過設別的屏幕尺寸或瀏覽器寬度，選擇最合適的那套寬度佈局；實現成本最低，但拓展性比較差；
3. 彈性佈局：以百分比做爲頁面的基本單位，能夠適應必定範圍內全部尺寸的設備屏幕及瀏覽器寬度，並能完美利用有效空間展示最佳效果；
4. 混合佈局：同彈性佈局相似，能夠適應必定範圍內全部尺寸的設備屏幕及瀏覽器寬度，並能完美利用有效空間展示最佳效果；只是混合像素、和百分比兩種單位做爲頁面單位。

參考https://www.w3cschool.cn/responsive/8w9adozt.html

總結：對於通欄，大於等於2欄的等分排版建議採用彈性佈局；大於等於2欄的非等分排版建議採用混合佈局；

二.佈局響應

佈局響應，對頁面進行響應式的設計實現，須要對相同內容進行不一樣寬度的佈局設計，有兩種方式：桌面優先（從桌面端開始向下設計）；移動優先（從移動端向上設計）；

不管基於那種模式的設計，要兼容全部設備，佈局響應時不可避免地須要對模塊佈局作一些變化（發生佈局改變的臨界點稱之爲斷點）， 咱們經過JS獲取設備的屏幕寬度，來改變網頁的佈局，這一過程咱們能夠稱之爲佈局響應屏幕。常見的主要有以下幾種方式：

佈局不變，對模塊內的內容進行1.擠壓－拉伸；2. 換行－平鋪；3. 刪減－增長；

佈局改變，主要有：1.模塊位置變換；2.模塊展現方式改變：隱藏－展開；3.模塊數量改變：刪減－增長；

---

三.媒體查詢

（要注意最大寬度時從大到小，最小寬度時從小到大,不然樣式優先級問題）

方式一：在樣式表中內嵌@media

@media 設備名 only|and|not (media feature){CSS-Code}

字符間以空格相連，選取條件包含在小括號內，多種設備用逗號分隔，這一點繼承了css基本語法。

• only（限定某種設備，可省略），
• and（邏輯與），
• not（排除某種設備）爲邏輯關鍵字，
• srules爲兼容設置的樣式表，包含在中括號裏面。

超小屏幕<768px；小屏幕>=768px；中等屏幕>=992px；大屏幕設備>=1200px

例子

/*屏寬大於或等於480px小於1024px以及垂直放置設備的css樣式。*/

 @media only  screen and (min-device-width:480px) and (max-device-width:1024px) and ( orientation:portrait ){ .box{margin:0 auto;} }

方式二：引用外部樣式@import

@import url("css/?.css" )設備名 only|and|not (media feature){CSS-Code}

例子

@import url('style/a.css') screen and (min-width:960px) and (max-width:1199px){   };

注意：（最好在樣式表中使用，在style標籤中使用IE6.7不兼容）

方式三：在link中使用media

<link rel="stylesheet" type="text/css" href="A.css" media="screen and (min-width: 800px)">

例子：

  <link rel="stylesheet" href="style/b.css" media=" only screen and (max-device-width:480px) ">

四.媒體查詢@media

使用@media 查詢，你能夠針對不一樣的媒體類型定義不一樣的樣式。

參考http://www.runoob.com/cssref/css3-pr-mediaquery.html

https://www.w3cplus.com/content/css3-media-queries

主要媒體類型有（可用設備）：

1. all---用於全部設備
2. screen---用於電腦屏幕，平板電腦，智能手機等。
3. print---用於打印機和打印預覽
4. speech---應用於屏幕閱讀器等發聲設備

媒體特性（功能）@media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式

媒體特性	取值	min/max	描述
width	<length>	yes	定義輸出設備中的頁面可見區域寬度
height	<length>	yes	定義輸出設備中的頁面可見區域高度
device-width	<length>	yes	定義輸出設備的屏幕可見寬度
device-height	<length>	yes	定義輸出設備的屏幕可見高度
orientation	portrait 豎屏   landscape橫屏	no	定義'height'是否大於或等於'width'。   值portrait表明是---豎屏，landscape表明否---橫屏
aspect-ratio	<ratio>	yes	定義'width'與'height'的比率
device-aspect-ratio	<ratio>	yes	定義'device-width'與'device-height'的比率。如常見的顯示器比率：4/3, 16/9, 16/10
color	<integer>	yes	定義每一組輸出設備的彩色原件個數。若是不是彩色設備，則值等於0
color-index	<integer>	yes	定義在輸出設備的彩色查詢表中的條目數。若是沒有使用彩色查詢表，則值等於0
monochrome	<integer>	yes	定義在一個單色框架緩衝區中每像素包含的單色原件個數。若是不是單色設備，則值等於0
resolution	<resolution>	yes	定義設備的分辨率。如：96dpi, 300dpi, 118dpcm
scan	progressive | interlace	no	定義電視類設備的掃描工序   progressive：連續掃描；interlace：交織掃描
grid	<integer>	no	用來查詢輸出設備是否使用柵格或點陣。只有1和0纔是有效值，1表明是，0表明否

五.經常使用視口

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

viewport 是用戶網頁的可視區域。

viewport 翻譯爲中文能夠叫作"視區"。

手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，一般這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。

可能的值：

• width---viewport的寬度 可能的值 像素| device-width
• height – viewport的高度---可能的值 像素| device-height
• initial-scale – 初始的縮放比例
• minimum-scale – 容許用戶縮放到的最小比例
• maximum-scale – 容許用戶縮放到的最大比例
• user-scalable – 用戶是否能夠手動縮放---可能的值yes||no或者1||0
• target-densitydpi--- [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

<meta http-equiv="X-UA-Compatible" content="IE=edge">

此屬性爲文檔兼容模式聲明，表示若是在IE瀏覽器下則使用最新的標準渲染當前文檔

X-UA-Compatible是自從IE8新加的一個設置，對於IE8如下的瀏覽器是不識別的。

IE=edge 告訴IE,IE8之後的版本使用最新版本的引擎渲染網頁;

chrome=1安裝了GCF後能夠激活Chrome Frame.

emmet快捷鍵：meta:compat

最後說下IE瀏覽器，由於他不支持media Queries的，使用時須要引用一個Media Query Javascript解決，以下

<!–[if lt IE 9]>

<script src=」../../css3-mediaqueries.js」></script>

<![endif]–>