怎么利用vw+rem進行移動端布局

小編給大家分享一下怎么利用vw+rem進行移動端布局，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

簡單介紹下rem布局方案

rem是css中的長度單位，1rem=根元素html的font-size值。當頁面中所有元素都使用rem單位時，你只需要改變根元素font-size值，所有元素就會按比例放大或者縮小。因此我們只需要寫一小段js代碼，根據屏幕寬度改變html的font-size值，就可以做到彈性布局。這種方法確實便捷，兼容性也很好，是目前非常主流的彈性布局方案。但這種方案有弊端（弊端之一：和根元素font-size值強耦合，系統字體放大或縮小時，會導致布局錯亂；弊端之二：html文件頭部需插入一段js代碼 ），本文將介紹一種更優秀純粹的方案。

vw單位實現彈性布局

我們先來看看這vw vh單位 w3c的官方解釋 vw：1% of viewport’s width vh：1% of viewport’s height

viewport即瀏覽器可視區域大小 我們可以這樣理解 100vw = window.innerwidth, 100vh = window.innerheight 在移動端我們一般都可以認為，100vw就是屏幕寬度。若使用vw布局，就不需要再像rem那樣，在js中去動態設置根元素的font-size了，sass中只需要使用這個函數做轉換即可

//以iphone7尺寸@2x 750像素寬的視覺稿為例
@function vw($px) {
    @return ($px / 750) * 100vw;
}

//假設一個div元素在視覺稿中，寬度為120px，字體大小為12px
div {
    width: vw(120);
    font-size: vw(12);
}

vw單位和百分比%單位對比

那么100vw和我們平時用的width:100%有什么區別呢？

1.百分比%是根據父元素寬度或者高度進行計算，而vw vh固定按照viewport來計算，不會受父元素寬高度影響。

2.100vw包括了頁面滾動條寬度（頁面滾動條屬于viewport范圍內，100vw當然包括了頁面滾動條寬度）。但把body或者html設置為width:100%時，是不包括頁面滾動條的寬度的。也就是說100vw在有縱向滾動條的情況下，會比100%寬。 那么就會引發一個問題：pc端使用vw單位時，如果頁面內容超出一屏長度，出現了縱向滾動條，同時有元素width:100vw， 則會導致出現條橫向滾動條，因為元素（100vw + 滾動條寬度）超出了viewport寬度。（移動端滾動條不占位，所以不會有這個問題）不過pc端一般不需要彈性布局，還是盡量使用width:100%更保險。

• 根據CSS3規范,視口單位主要包括以下4個:
  

• vw : 1vw 等于視口寬度的1%

• vh : 1vh 等于視口高度的1%

• vmin : 選取 vw 和 vh 中最小的那個

• vmax : 選取 vw 和 vh 中最大的那個

用視口單位度量，視口寬度為100vw，高度為100vh（左側為豎屏情況，右側為橫屏情況）

例如，在桌面端瀏覽器視口尺寸為650px，那么 1vw = 650 * 1% = 6.5px（這是理論推算的出，如果瀏覽器不支持0.5px，那么實際渲染結果可能是7px）。

兼容性

利用適口單位適配頁面

對于移動端開發來說，最為重要的一點是如何適配頁面，實現多終端的兼容，不同的適配方式各有千秋，也各有缺點。

就主流的響應式布局、彈性布局來說，通過Media Queries 實現的布局需要配置多個響應斷點，而且帶來的體驗也對用戶十分的不友好:布局在響應斷點范圍內的分辨率維持不表，而在響應斷點切換的瞬間，布局帶來斷層式的切換變換，如同卡帶的唱機般"咔咔咔"地一又一下。

而通過采用rem單位的動態計算的彈性布局,則是需要在頭部內嵌一段腳本來進行監聽分辨率的變化來動態改變根元素字體大小，使得CSS于JS耦合了在一起。

有沒有辦法能夠解決這樣的問題呢？

答案是肯定,通過利用適口單位實現適配的頁面,是既能解決響應式斷層問題，又能解決腳本依賴的問題的。

用法以iPhone6為基準(750)

第一步一般來說，我都會對移動端進行meta標簽設置

<meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, minimum-scale=2.0, user-scalable=no">

因為iPhone6以及大多數的dpr為2,為了第二步的方便進行換算

第二步設置body、html的font-size

html {
    font-size: 13.3333333333333vw // 100px
}

13.3333333333333vw怎么來?

• 適口為100vw,以iPhone6 750px基準

• 適口/iPhone6

• 100vw / 750 = 0.133333333333333vw

• 如果我們以100px作為適口那么

• 100px / 750 = 0.133333333333333px

• 就是1px = 0.133333333333333vw

• 那么整個適口等于 0.133333333333333 * 10013.3333333333333vw = 100px

• 最終于得出 100px = 1rem

通過這樣子換算我們利用vw把rem轉換成了以100px為基準

那么在項目上就很好地可以進行使用了

div {
 
     // width: 100px;
     width: 1rem; 
}
 
span {
   // height: 12px
    height: .12rem
}

看完了這篇文章，相信你對“怎么利用vw+rem進行移動端布局”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！