如何利用vw+rem進行移動端布局

你還在用rem彈性布局嗎?在html文件頭部放入一大段壓縮過的js代碼,是不是讓你很難受?來了解下vw吧,能讓你的代碼更純粹
簡單介紹下rem布局方案
rem是css中的長度單位,1rem=根元素html的font-size值。當(dāng)頁面中所有元素都使用rem單位時,你只需要改變根元素font-size值,所有元素就會按比例放大或者縮小。因此我們只需要寫一小段js代碼,根據(jù)屏幕寬度改變html的font-size值,就可以做到彈性布局。這種方法確實便捷,兼容性也很好,是目前非常主流的彈性布局方案。但這種方案有弊端(弊端之一:和根元素font-size值強耦合,系統(tǒng)字體放大或縮小時,會導(dǎo)致布局錯亂;弊端之二:html文件頭部需插入一段js代碼 ),本文將介紹一種更優(yōu)秀純粹的方案。
vw單位實現(xiàn)彈性布局
我們先來看看這vw vh單位 w3c的官方解釋 vw:1% of viewport’s width vh:1% of viewport’s height
viewport即瀏覽器可視區(qū)域大小 我們可以這樣理解 100vw = window.innerwidth, 100vh = window.innerheight 在移動端我們一般都可以認(rèn)為,100vw就是屏幕寬度。若使用vw布局,就不需要再像rem那樣,在js中去動態(tài)設(shè)置根元素的font-size了,sass中只需要使用這個函數(shù)做轉(zhuǎn)換即可
//以iphone7尺寸@2x 750像素寬的視覺稿為例 @function vw($px) { @return ($px / 750) * 100vw; } //假設(shè)一個div元素在視覺稿中,寬度為120px,字體大小為12px div { width: vw(120); font-size: vw(12); }
vw單位和百分比%單位對比
那么100vw和我們平時用的width:100%有什么區(qū)別呢?
1.百分比%是根據(jù)父元素寬度或者高度進行計算,而vw vh固定按照viewport來計算,不會受父元素寬高度影響。
2.100vw包括了頁面滾動條寬度(頁面滾動條屬于viewport范圍內(nèi),100vw當(dāng)然包括了頁面滾動條寬度)。但把body或者h(yuǎn)tml設(shè)置為width:100%時,是不包括頁面滾動條的寬度的。也就是說100vw在有縱向滾動條的情況下,會比100%寬。 那么就會引發(fā)一個問題:pc端使用vw單位時,如果頁面內(nèi)容超出一屏長度,出現(xiàn)了縱向滾動條,同時有元素width:100vw, 則會導(dǎo)致出現(xiàn)條橫向滾動條,因為元素(100vw + 滾動條寬度)超出了viewport寬度。(移動端滾動條不占位,所以不會有這個問題)不過pc端一般不需要彈性布局,還是盡量使用width:100%更保險。
- 根據(jù)CSS3規(guī)范,視口單位主要包括以下4個:
- vw : 1vw 等于視口寬度的1%
- vh : 1vh 等于視口高度的1%
- vmin : 選取 vw 和 vh 中最小的那個
- vmax : 選取 vw 和 vh 中最大的那個
用視口單位度量,視口寬度為100vw,高度為100vh(左側(cè)為豎屏情況,右側(cè)為橫屏情況)
例如,在桌面端瀏覽器視口尺寸為650px,那么 1vw = 650 * 1% = 6.5px(這是理論推算的出,如果瀏覽器不支持0.5px,那么實際渲染結(jié)果可能是7px)。
兼容性
利用適口單位適配頁面
對于移動端開發(fā)來說,最為重要的一點是如何適配頁面,實現(xiàn)多終端的兼容,不同的適配方式各有千秋,也各有缺點。
就主流的響應(yīng)式布局、彈性布局來說,通過Media Queries 實現(xiàn)的布局需要配置多個響應(yīng)斷點,而且?guī)淼捏w驗也對用戶十分的不友好:布局在響應(yīng)斷點范圍內(nèi)的分辨率維持不表,而在響應(yīng)斷點切換的瞬間,布局帶來斷層式的切換變換,如同卡帶的唱機般"咔咔咔"地一又一下。
而通過采用rem單位的動態(tài)計算的彈性布局,則是需要在頭部內(nèi)嵌一段腳本來進行監(jiān)聽分辨率的變化來動態(tài)改變根元素字體大小,使得CSS于JS耦合了在一起。
有沒有辦法能夠解決這樣的問題呢?
答案是肯定,通過利用適口單位實現(xiàn)適配的頁面,是既能解決響應(yīng)式斷層問題,又能解決腳本依賴的問題的。
用法以iPhone6為基準(zhǔn)(750)
第一步一般來說,我都會對移動端進行meta標(biāo)簽設(shè)置
<meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, minimum-scale=2.0, user-scalable=no">
因為iPhone6以及大多數(shù)的dpr為2,為了第二步的方便進行換算
第二步設(shè)置body、html的font-size
html { font-size: 13.3333333333333vw // 100px }
13.3333333333333vw怎么來?
- 適口為100vw,以iPhone6 750px基準(zhǔn)
- 適口/iPhone6
- 100vw / 750 = 0.133333333333333vw
- 如果我們以100px作為適口那么
- 100px / 750 = 0.133333333333333px
- 就是1px = 0.133333333333333vw
- 那么整個適口等于 0.133333333333333 * 10013.3333333333333vw = 100px
- 最終于得出 100px = 1rem
通過這樣子換算我們利用vw把rem轉(zhuǎn)換成了以100px為基準(zhǔn)
那么在項目上就很好地可以進行使用了
div { // width: 100px; width: 1rem; } span { // height: 12px height: .12rem }
到此這篇關(guān)于如何利用vw+rem進行移動端布局的文章就介紹到這了,更多相關(guān)vw+rem移動端布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
淺析CSS中單位px、rem、em、vh、vw之間的區(qū)別
這篇文章主要介紹了CSS中單位px、rem、em、vh、vw之間的區(qū)別,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-25CSS 中px、em、rem、%、vw、vh單位之間的區(qū)別詳解
這篇文章主要介紹了CSS 中px、em、rem、%、vw、vh單位之間的區(qū)別,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2020-03-16CSS3移動端vw+rem不依賴JS實現(xiàn)響應(yīng)式布局的方法
這篇文章主要介紹了CSS3移動端vw+rem不依賴JS實現(xiàn)響應(yīng)式布局的方法的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-23css3中單位px,em,rem,vh,vw,vmin,vmax的區(qū)別及瀏覽器支持情況
這篇文章主要介紹了css3中單位px,em,rem,vh,vw,vmin,vmax的區(qū)別及瀏覽器支持情況的相關(guān)資料,需要的朋友可以參考下2016-12-06- 下面小編就為大家?guī)硪黄獪\析rem和em和px vh vw和% 移動端長度單位。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考,一起跟隨小編過來看看吧2016-04-28