前端適配筆記
媒體查詢可以讓我們根據裝置顯示器的特性（如視口寬度，螢幕比例，裝置方向：橫向或縱向）為其設定CSS樣式，媒體查詢由媒體型別和一個或多個檢測媒體特性的條件表示式組成；
css3
必須設定<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
viewport：視口
initial-scale：[0,10] 初始縮放比例，1表示不縮放
maximum-scale：[0,10] 最小縮放比例
maximum-scale: [0,10] 最大縮放比例
user-scalable: yes／no 是否允許手動縮放頁面，預設值為yes
語法：
@media mediatype and|not|only (media feature) {* CSS-Code; *}
第一種方法是css2媒體查詢用法，最大的弊端是他會增加頁面http的請求次數，增加了頁面負擔，
我們一般用第二種方法CSS3把樣式都寫在一個檔案裡面才是最佳的方法。
但是媒體查詢的缺點也很明顯，如果在瀏覽器大小改變時，需要改變的樣式太多，那麼多套樣式程式碼會很繁瑣；
二，rem佈局（彈性佈局）移動端
rem是指相對於根元素(html)的字型大小的單位
1.媒體查詢結合rem佈局
媒體查詢動態修改根元素的大小，使得rem一直在跟著變化，響應式就成功了。
為什麼使用媒體查詢結合rem佈局
一個物體在一個超大空間中顯得很小，但是在小的空間存放不下，為使得頁面佈局不管在什麼裝置上都是正常，協調的情況，就會採用媒體查詢+rem，來根據不同的裝置去相應的元素的大小；
3、rem+VW佈局
必須設定<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
為了方便計算可把html中font-size設定成100px；但是100px固定大小不會自動適配。所以把100px轉換成vw
100px=?vw等於他的視口寬度
假如：裝置：640px dpr：2 320px
因為 100vw=320px
所以 1vw=3.2px；
所以 100px=31.25vw
假如 裝置750px dpr為2 375px
因為 100vw=375px；
所以 1vw=3.75px；
所以 100px=26.67vw
當裝置640px ：31.25vw
當裝置750px ：26.67vw
注意文字要單獨設定單位為px，否則文字為100px太大，要用媒體查詢的方式改變文字大小。
優點：理想狀態是所有螢幕的高寬比和最初的設計高寬比一樣，或者相差不多，完美適應。
缺點：這種rem+js只不過是寬度自適應，高度沒有做到自適應，一些對高度，或者元素間距要求比較高的設計，則這種佈局沒有太大的意義。如果只是寬度自適應，更推薦響應式設計。
四、百分比佈局 (***流式佈局)***
以百分比作為頁面的基本單位，可以適應一定範圍內所有的尺寸的裝置螢幕及瀏覽器寬度，並能完美利用有效空間展現最佳效果
五、混合式佈局
同彈性佈局類似，可以適應一定範圍內所有尺寸的裝置螢幕及瀏覽器寬度，並能完美利用有效空間展現最佳效果；只是混合畫素、和百分比兩種單位作為頁面單位
六、響應式佈局
1、佈局特點：每個螢幕解析度下面會有一個佈局樣式，即元素位置和大小都會變。
2、設計方法：媒體查詢+流式佈局。通常使用 @media 媒體查詢 和網格系統 (Grid System) 配合相對佈局單位進行佈局，實際上就是綜合響應式、流動等上述技術通過 CSS 給單一網頁不同裝置返回不同樣式的技術統稱。
優點：適應pc和移動端，如果足夠耐心，效果完美
缺點：（1）媒體查詢是有限的，也就是可以枚舉出來的，只能適應主流的寬高。（2）要匹配足夠多的螢幕大小，工作量不小，設計也需要多個版本。
響應式頁面在頭部會加上這一段程式碼：
<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">
例：
var coverSupport = 'CSS'in window && typeof CSS.supports === 'function' && (CSS.supports('top:env(a)') || CSS.supports('top:constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')