首先設定meta屬性，如下**：
"viewport" content=
"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
>
html其中的13.33333333vw是怎麼來的呢？就是你的設計稿是750px，那麼設計稿的1px就是0.133333333vw，那麼100px就是13.33333333vw。也即是html的font-size設定為100px相當於1rem（設計稿為750px）。那麼我們就可以很輕鬆的換算設計稿中的單位為rem了，比如乙個元素寬度為150px，轉換為rem就是1.5rem。其他尺寸設計稿的計算方式依次類推。
/**
* view-port list:
320x480
320x568
320x570
360x592
360x598
360x604
360x640
360x720
375x667
375x812
393x699
412x732
414x736
480x854
540x960
640x360
720x1184
720x1280
800x600
1024x768
1080x1812
1080x1920
*/html
@media screen and
(max-width:
320px)
}@media screen and
(min-width:
321px)
and(max-width:
360px)
}@media screen and
(min-width:
361px)
and(max-width:
375px)
}@media screen and
(min-width:
376px)
and(max-width:
393px)
}@media screen and
(min-width:
394px)
and(max-width:
412px)
}@media screen and
(min-width:
413px)
and(max-width:
414px)
}@media screen and
(min-width:
415px)
and(max-width:
480px)
}@media screen and
(min-width:
481px)
and(max-width:
540px)
}@media screen and
(min-width:
541px)
and(max-width:
640px)
}@media screen and
(min-width:
641px)
and(max-width:
720px)
}@media screen and
(min-width:
721px)
and(max-width:
768px)
}@media screen and
(min-width:
769px)
}body
html a
《從**和網易的font-size思考移動端怎樣使用rem？》
《最簡單的移動端適配方案(rem+vw)》
移動端適配rem vw
對於做移動端開發的同學來說，最為重要的一點是如何適配頁面，實現多終端的相容，不同的適配方式各有千秋，也各有缺點。目前主流的有響應式布局和彈性布局。響應式布局通過 查詢配置多個響應斷點，布局在響應斷點範圍內的解析度下維持不變，而在響應斷點切換的瞬間，布局會有斷層式的切換變化 通過採用rem單位動態計算...
移動端自適應布局為什麼要使用rem vw
1.可以使用百分比嗎？如果所有元素的大小都設定成html或body大小的乙個百分比，理論上的確可以在不同的裝置上實現自適應。但是事與願違，並非所有情況都可以設定百分比，比如浮動元素會脫離文件流，父級元素必須預先確定高度才能設定高度百分比。這些問題當然都有很好的解決方案，但是這些缺陷已經足以讓我們在自...
最簡單的移動端適配方案 rem vw 沒有之一
rem 這個單位對於前端來說並不陌生了,在移動端適配方面,我們經常會用到它,通常我們會採用類似 flexible.js 的方案,寫px,然後通過外掛程式轉化成rem,然後得出一堆小數值的rem單位.這個方案已經用了很多年,相容性很好,然而現在已經2018年了,許多相容性問題現在不再那麼頭疼了,因此我...