自適應，響應式，viewport總結

ViewPort ：

　　<meta>標記用於指定用戶是否能夠縮放Web頁面，若是能夠，那麼縮放到的最大和最小縮放比例是什麼。使用ViewPort <meta>標記還表示文檔針對移動設備進行了優化。ViewPort <meta>標記的content值是由指令及其值組成的以逗號分隔的列表。

<meta name=」viewport」 content=」width=240, height=320, user-scalable=yes, initial-scale=2.5, maximum-scale=5.0, minimun-scale=1.0」>

1.viewport最最須要注意的是css中的1px並不等於設備的1px。

設備像素

 

設備像素是指設備中使用的物理像素，又稱硬件像素

 

css像素

 

css像素是指css樣式到嗎中使用的邏輯像素。若是在一個設備中，硬件像素數與css像素數相等，將不會產生任何問題。可是，因爲視網膜設備的出現，這二者之間的差別變得愈來愈大。硬件像素數與css像素數成爲兩種大相徑庭的像素。

 

例如在iphone 4設備屏幕中的物理像素是640px*960px，而css邏輯像素數爲320*480px。所以，使用大約4個物理像素來顯示一個css像素。

 

2.width/height:指定視區的邏輯寬度與高度。單位能夠是px,或者device-width、device-height。視區寬度與高度等於設備的寬度與高度。這樣就可讓網頁根據不一樣的屏幕大小自適應顯示了。

 3.user-scalable指令指定用戶是否能夠縮放視區，即縮放Web頁面的視圖。值爲yes時容許用戶進行縮放，值爲no時不容許縮放。

 4.initial-scale指令用於設置Web頁面的初始縮放比例。默認的初始縮放比例值因智能手機瀏覽器的不一樣而有所差別。一般狀況下設備會在瀏覽器中呈現出整個Web頁面，設爲1.0則將顯示未經縮放的Web文檔。

5.maximum-scale和minimum-scale指令用於設置用戶對Web頁面縮放比例的限制。值的範圍爲0.25至10.0之間。與initial-scale相同，這些指令的值是應用於視區內容的縮放比例。

 6.viewport通常使用於移動端自適應，不過移動端碎屏解決最好的我以爲仍是rem比較好些，移動端切圖之後還要注意效果圖的最大寬度。

 7.自適應與響應式的區別

①不一樣設備，自適應大小變化，但整體樣式不變。響應式會根據不一樣設備改變展現的樣式。
②自適應佈局，不能使用絕對單位。使用%，em,rem。響應式使用媒體查詢。
③viewport用在手機上的。單位可使用px.viewport的做用是手機的像素與實際寬度不同。
④移動頁面寫px就要使用viewport。