rem+js中需要引入的js**如下：
window.
onload
=function()
,false);
}<
/script>
vw : 1vw 等於視口寬度的1%
vh : 1vh 等於視口高度的1%
vmin : 選取 vw 和 vh 中最小的那個
vmax : 選取 vw 和 vh 中最大的那個
用視口單位度量，視口寬度為100vw，高度為100vh（左側為豎屏情況，右側為橫屏情況）
例如，在桌面端瀏覽器視口尺寸為650px，那麼 1vw = 650 * 1% = 6.5px,如果設計圖為750px.則1vw等於7.5px（這是理論推算的出，如果瀏覽器不支援0.5px，那麼實際渲染結果可能是7px）。
相容性利用適口單位適配頁面
對於移動端開發來說，最為重要的一點是如何適配頁面，實現多終端的相容，不同的適配方式各有千秋，也各有缺點。
就主流的響應式布局、彈性布局來說，通過media queries 實現的布局需要配置多個響應斷點，而且帶來的體驗也對使用者十分的不友好:布局在響應斷點範圍內的解析度維持不表，而在響應斷點切換的瞬間，布局帶來斷層式的切換變換，如同卡帶的唱機般"咔咔咔"地一又一下。
而通過採用rem單位的動態計算的彈性布局,則是需要在頭部內嵌一段指令碼來進行監聽解析度的變化來動態改變根元素字型大小，使得css於js耦合了在一起。
有沒有辦法能夠解決這樣的問題呢？
答案是肯定,通過利用適口單位實現適配的頁面,是既能解決響應式斷層問題，又能解決指令碼依賴的問題的。
用法以iphone6為基準(750)
第一步一般來說，我都會對移動端進行meta標籤設定
因為iphone6以及大多數的dpr為2,為了第二步的方便進行換算
第二步設定body、html的font-size
body,html
13.3333333333333vw怎麼來?
100 / 750 = 0.133333333333333vw 我們把這個適口當做100px,然後除於750換算得出 1px = 0.133333333333333vw 那麼整個適口等於 0.133333333333333 * 100 = 13.3333333333333vw = 100px
最終於得出 100px = 1rem
通過這樣子換算我們利用vw把rem轉換成了以100px為基準
那麼在專案上就很好地可以進行使用了
div
移動端布局單位
移動端裝置種類繁多，需要適配多種情況的響應式布局來保證美觀的頁面實現，先來解釋容易弄混的多個名詞。function var b null window.addeventlistener resize function 1 a window 我們的設計稿寬為720，我們將瀏覽器可見區域 7.2得到10...
移動端適配單位
之前做 的時候有聽前同事提起過，移動端的畫素單位是vw,今天剛好想起這個問題。vw就是用螢幕寬度做適配，移動端千奇百怪的尺寸，用寬度適配能避免好多問題。眾所周知css技術我們雖然很熟悉，在使用的過程卻很容易被困住，這讓我們在新問題出現的時候變得很不利。隨著web繼續不斷地發展，對於新技術新解決方案的...
移動端 單位 rem
rem是指相對於根元素的字型大小的單位 相對單位 rem和em的區別，em相對于父元素的字型大小的單位。rem相對於根元素html字型大小計算，px是乙個絕對的單位。所以rem可以實現強大的螢幕適配布局 例如 html btn 那麼.btn的寬度為120px 高度為60px 所以在做移動端適配的時候...