作為乙個真正的前端工作者適配是乙個老生常談的問題，那麼今天給大家總結一下在工作當中常用做適配的方式。
一、固定布局（pc端）（靜態布局）
以畫素作為頁面的基本單位，不管裝置和瀏覽器寬度，只設計一套尺寸
二、根據不同根據不同的解析度，載入不同的css樣式檔案（可切換的固定布局）自適應布局
1、注意：注意這裡的js一定要寫在標籤裡面，這樣在載入頁面內容之前，可以提前把css樣式表載入出來
2、**查詢
**查詢可以讓我們根據裝置顯示器的特性（如視口寬度、螢幕比例、裝置方向：橫向或縱向）為其設定css樣式，**查詢由**型別和乙個或多個檢測**特性的條件表示式組成。
link元素中的css**查詢
css3
必須設定
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)
第一種方法是css2**查詢用法，最大的弊端是他會增加頁面http的請求次數，增加了頁面負擔，
我們一般用第二種方法css3把樣式都寫在乙個檔案裡面才是最佳的方法。
但是**查詢的缺點也很明顯，如果在瀏覽器大小改變時，需要改變的樣式太多，那麼多套樣式**會很繁瑣。
三、rem布局（彈性布局）移動端
rem(font size of the root element)是指相對於根元素 (html)的字型大小的單位。
1、**查詢結合rem布局
**查詢動態修改根元素的大小，使得rem 一直在跟著變化，響應式就成功了。
為什麼使用**查詢結合rem布局
乙個物體在乙個超大空間中顯得很小，但是在小的空間存放不下，為使得頁面布局不管在什麼裝置上都是正常，協調的情況，就會採用**查詢 + rem，來根據不同的裝置去相應的改變元素的大小。
**查詢結合rem布局的缺點
計算起來太繁瑣
2、flexble.js和rem布局：
用法：首先在頁面匯入flexible.js匯入去掉mete標籤（禁止縮放）的設定
當設計圖為750px；從設計圖量出header為88px；
css設計為header的height 88/100=0.88rem;
3、rem+vw布局
必須設定
為了方便計算可把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）要匹配足夠多的螢幕大小，工作量不小，設計也需要多個版本。
響應式頁面在頭部會加上這一段**：
android的適配方法
首先要介紹一下drawable mdpi drawable hdpi 1280x800 drawable hdpi。這個相信好好看一下也明白。就是代表著解析度 320x480 1280x800 480x800三款螢幕資源包。其實適配也很多。我大致說一種就行，其他大家慢慢琢磨，或上網周轉。說明一下這個...
移動前端自適應適配方法總結
所謂前端適配，就是為了讓移動設計稿在大部分的移動裝置上看起來有一致的展示效果，目前比較流行的方法有兩種。一種是強制meta viewport寬度為設計稿寬度，一種是使用rem 自適應布局的flexible.js。各有利弊，使用第一種在某些瀏覽器的webview裡面會出現相容問題，而且對於1畫素會無法...
自定義的螢幕適配方法
當然，列數是固定的，但是我們需要的是的寬高比是不會變得，的大小還是得做活的。所以就有如下配置 1 item relatlayout relativelayout itemview.findviewbyid r.id.item relatlayout 2 imageview imageview ite...