文章目錄
- css3新增單位
- rem
- vw vh
- 移動端適配方案
- flexible rem方案
- 優點
- 缺點
- vh、vw方案
- 缺點
css3新增單位
rem
css3 新增相對單位
rem和em單位一樣，都是一個相對單位，em是相對于父元素的font-size進行計算，即父元素的font-size為npx，則1em就代表npx，所以em單位在不同的元素或選擇器中都不同
因此我們需要一個在所有元素或選擇器中都一致的一個單位，rem因此出現了
rem是相對于根元素html的font-size來進行計算的，即根元素html的font-size為npx，則1em就是npx
vw vh
- vw：1vw等于視口寬度的1%
- vh：1vh等于視口高度的1%
- vmin：選取vw和vh中最小的那個
- vmax：選取vw和vh中最大的那個
例如，在桌面端瀏覽器視口尺寸為650px，那么1vw = 650 * 1% = 6.5px（這是理論推算得出，如果瀏覽器不支持0.5px，那么實際渲染結果可能是7px），
如果設計稿為 750px，那么 1vw = 7.5px，100vw = 750px，其實設計稿按照設么都沒多大關系，最終轉化過來的都是相對單位，上面講的 rem 也是對它的模擬，這里的比例關系也推薦不要自己換算，使用 pxtoviewport 的庫就可以幫我們轉換，當然每種方案都會有其弊端，這里就不展開討論，
移動端適配方案
flexible rem方案
在進行移動端開發時，我們會發現一個問題，代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
float: left;
width: 90px;
height: 50px;
margin-right: 10px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
我們會發現這段代碼在不同設備上的布局會變得截然不同
在設備iPhone6/7/8上
在設備iPhone6/7/8 Plus下
可以發現這兩個頁面布局完全不同
造成這個問題的原因就是各個設備的螢屏寬度的不同，有些螢屏大有些螢屏小，那么我們怎么來使布局在不同的設備上都能正常顯示呢？
關鍵就在于我們書寫css樣式的時候，我們使用的單位是px
px是相對邏輯單位，我們寫多少px就是定死的值，是無法隨設備的寬度改變而改變的，而我們現在要實作同一元素在不同設備上布局的占比要一致，那么我們使用的單位就需要一致
因此我們想到使用rem，rem是相對于html的font-size來計算的，我們使用js在頁面布局之前，對當前設備的寬度進行獲取，然后除以10，相當于將頁面十等分，然后將十分之一設定成rem，這樣在不同的設備上rem代表的都是頁面寬度的十分之一，自然就能實作不同設備上的適配了
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit();
上面的代碼中，將html節點的font-size設定為頁面clientWidth(布局視口)的1/10，即1rem就等于頁面布局視口的1/10，這就意味著我們后面使用的rem都是按照頁面比例來計算的，
使用rem布局雖然可以解決適配問題，但是因為我們需要手工完成px單位到rem單位的轉換，所以就會變得復雜很多
優點
相對于px固定布局和百分比布局，可以很好地解決不同設備下的尺寸，間隙，字體的相對大小問題
缺點
1.計算繁瑣
2.需要js輔助
vh、vw方案
vh、vw方案即將視覺視口寬度window.innerWidth和視覺視口高度window.innerHeight等分為 100 份，
- vw(Viewport’s width)：1vw等于視覺視口的1%
- vh(Viewport’s height) :1vh 為視覺視口高度的1%
- vmin : vw 和 vh 中的較小值(用于設備旋轉時)
- vmax : 選取 vw 和 vh 中的較大值(用于設備旋轉時)
如果視覺視口為375px，那么1vw = 3.75px，這時UI給定一個元素的寬為75px（設備獨立像素），我們只需要將它設定為75 / 3.75 = 20vw，
缺點
- px轉換成vw不一定能完全整除，因此有一定的像素差，
- 比如當容器使用vw，margin采用px時，很容易造成整體寬度超過100vw，從而影響布局效果，當然我們也是可以避免的，例如使用padding代替margin，結合calc()函式使用等等…
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/378226.html
標籤：其他
下一篇：搭建 Vue 開發環境