作為一個真正的前端工作者適配是一個老生常談的問題，那麼今天給大家總結一下在工作當中常用做適配的方式。 一、固定佈局（pc端）（靜態佈局） 以像素作為頁面的基本單位，不管設備和瀏覽器寬度，只設計一套尺寸 二、根據不同根據不同的解析度，載入不同的CSS樣式文件（可切換的固定佈局）自適應佈局 1、<scr ...
作為一個真正的前端工作者適配是一個老生常談的問題，那麼今天給大家總結一下在工作當中常用做適配的方式。
一、固定佈局（pc端）（靜態佈局）
以像素作為頁面的基本單位，不管設備和瀏覽器寬度，只設計一套尺寸
二、根據不同根據不同的解析度，載入不同的CSS樣式文件（可切換的固定佈局）自適應佈局
1、<script>
// 解析度大於等於1680，大部分為1920的情況下，調用此css
if(window.screen.width >= 1680){
document.write('<link rel="stylesheet" href="css/index_1920.css">');
}
// 解析度再在1600-1680的情況下，調用此css
else if(window.screen.width >= 1600){
document.write('<link rel="stylesheet" href="css/index_1600.css">');
}
// 解析度小於1600的情況下，調用此css
else{
document.write('<link rel="stylesheet" href="css/index.css">');
}
</script>
註意：註意這裡的js一定要寫在<head></head>標簽裡面，這樣在載入頁面內容之前，可以提前把css樣式表載入出來
2、媒體查詢
媒體查詢可以讓我們根據設備顯示器的特性（如視口寬度、屏幕比例、設備方向：橫向或縱向）為其設定CSS樣式，媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。
link元素中的CSS媒體查詢
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
css3
必須設置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
viewport：視口
width=device-width:就將佈局視口設置成了理想的視口。
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(font size of the root element)是指相對於根元素 (html)的字體大小的單位。
1、媒體查詢結合rem佈局
媒體查詢動態修改根元素的大小，使得rem 一直在跟著變化，響應式就成功了。
為什麼使用媒體查詢結合rem佈局
一個物體在一個超大空間中顯得很小，但是在小的空間存放不下，為使得頁面佈局不管在什麼設備上都是正常，協調的情況，就會採用媒體查詢 + rem，來根據不同的設備去相應的改變元素的大小。
媒體查詢結合rem佈局的缺點
計算起來太繁瑣
2、flexble.js和rem佈局：
用法：首先在頁面導入flexible.js導入<script src="js/flexible.js"></script>去掉mete標簽（禁止縮放）的設置
當設計圖為750px；從設計圖量出header為88px；
css設計為header的height 88/100=0.88rem;
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 ">
