1. 媒體查詢（廉頗老矣比规，尚能飯）
@media screen and (min-width: 375px){
html {
font-size: 14.0625px;
}
}
@media screen and (min-width: 360px){
html {
font-size: 13.5px;
}
}
@media screen and (min-width: 320px){
html {
font-size: 12px;
}
}
html {
font-size: 16px;
}
能針對優(yōu)化若厚，但是屏幕尺寸太多，導致一些屏幕看起來不是那么合適蜒什，有點生硬测秸。內容的彈性自適應只會在臨界點的時候，突然變化灾常。
2. 百分比（廉頗老矣霎冯，尚能飯）
確定高度，寬度使用百分比钞瀑，這樣屏幕寬度變大的話沈撞，內容寬度也會隨之變大。能適應一般的情況雕什。
3. flex彈性布局
div {
display: flex;
}
4. rem + viewport（比較成熟的方案）
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximumu-scale=1.0,user-scaleable=no">
width 網(wǎng)頁內容寬度等于設備寬度缠俺，把理想的視窗寬度設置為設備寬度
initial-scale 初始縮放比例，能起到 width=device-width 的作用
minimum-sacle 最小縮放比例
maximum-scale 最大縮放比例
user-scaleable 用戶能否進行縮放操作贷岸，yes/no
dpr（device pixel ratio）[設備像素比 = 設備像素 / 設備獨立像素]
一個物理(設備)像素是顯示器（手機屏幕）上最小的物理顯示單元壹士，在OS的調度下，每一個設備像素都有自己的顏色值和亮度值偿警。
設備獨立像素 （也叫目睹無關像素）躏救，也可以認為是計算機坐標系中的一個點，這個點代表一個可以由程序使用的虛擬像素（css像素）户敬，然后相關系統(tǒng)轉換為物理像素落剪。
像素只是一個抽象的單位，在不同的設備或不同的環(huán)境中尿庐，css中的1px所代表的設備物理像素是不同的。
dpr = 1的時候呢堰，css的1個像素點 抄瑟，對應一個物理像素點。
dpr = 2的時候，css的1個像素點皮假，對應4個物理像素點鞋拟，為什么是4個呢，因為寬對應是2倍惹资，高也對應是2倍贺纲。
dpr = 3，css的1個像素點褪测，對應9個像素點猴誊。
dpr > 1， 會帶來圖片會模糊的問題侮措，原理可以想象懈叹，一瓶藍墨水，如果混合在4倍的容器里面分扎，顏色是不是會比較淺澄成。1px邊框也是個問題，這個可以用偽元素 + transform 畏吓，scale:0.5 來解決墨状。
對于rem + viewport方案，html的font-szie大小菲饼，一般為窗口大小的0.1倍肾砂，或者設計稿的0.1倍，然后動態(tài)設置viewport巴粪；
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
布局的時候通今，各元素css尺寸 = 設計稿標注尺寸 / 設計稿橫向分辨率 / 10；
font-size可能需要額外的媒體查詢肛根，并且font-size不用rem辫塌；
有最大臨界點，比如物理分辨率大于1080派哲，可以訪問電腦端網(wǎng)頁臼氨。
搭配less或者sass會更好用
//定義一個變量和一個mixin
@baseFontSize: 75;//基于視覺稿橫屏尺寸/100得出的基準font-size
.px2rem(@name, @px){
@{name}: @px / @baseFontSize * 1rem;
}
//使用示例：
.container {
.px2rem(height, 240);
}
//less翻譯結果：
.container {
height: 3.2rem;
}
其實可以參考阿里的 lib-flexible
5. vw, vh移動端設配新貴（設備版本 > android 4.3）
1vw表示1%的屏幕寬度，同理1vh也表示1%的屏幕高度芭届。
可以通過caniuse網(wǎng)站查詢vw適配情況储矩，android版本 > 4.4的都支持，ios支持比較好褂乍。
a. 所有布局都使用vw持隧，vh來做單位
設計稿 750px === 100vw
$vw_base: 750;
@function vw($px) {
@return ($px / 750) * 100vw;
}
b. 沿用rem單位，vw只用于html的font-size上面逃片，這樣可以避免使用js來動態(tài)計算根元素字體大小屡拨。用sass計算
// rem 單位換算：定為 75px 只是方便運算，750px-75px、640-64px呀狼、1080px-108px裂允，如此類推
$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基準值
@function rem($px) {
@return ($px / $vw_fontsize ) * 1rem;
}
// 根元素大小使用 vw 單位
$vw_design: 750;
html {
font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; //就是相當于20vw
// 同時，通過Media Queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
// body 也增加最大最小寬度限制哥艇，避免默認100%寬度的 block 元素跟隨 body 而過大過小
body {
max-width: 540px;
min-width: 320px;
}
這部分代碼參考了利用視口單位實現(xiàn)適配布局 | Aotu.io「凹凸實驗室」
如果是用calc來計算绝编，比如
html{
font-size: calc(16px + 2 * (100vw - 375px) / 225);
}
要注意，Safari不支持這樣貌踏，不過它支持將字體大小相對于10px的百分比的計算十饥，如
html{
font-size: calc(100% + 2 * (100vw - 375px) / 225);
}
此處可查看基于vw等viewport視區(qū)單位配合rem響應式排版和布局 獲得更詳細的信息。
