怎么利用vw+rem進(jìn)行移動(dòng)端布局-創(chuàng)新互聯(lián)

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

目前創(chuàng)新互聯(lián)已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、普洱網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

簡(jiǎn)單介紹下rem布局方案

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

vw單位實(shí)現(xiàn)彈性布局

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

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

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

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

vw單位和百分比%單位對(duì)比

那么100vw和我們平時(shí)用的width:100%有什么區(qū)別呢？

1.百分比%是根據(jù)父元素寬度或者高度進(jìn)行計(jì)算，而vw vh固定按照viewport來(lái)計(jì)算，不會(huì)受父元素寬高度影響。

2.100vw包括了頁(yè)面滾動(dòng)條寬度（頁(yè)面滾動(dòng)條屬于viewport范圍內(nèi)，100vw當(dāng)然包括了頁(yè)面滾動(dòng)條寬度）。但把body或者h(yuǎn)tml設(shè)置為width:100%時(shí)，是不包括頁(yè)面滾動(dòng)條的寬度的。也就是說(shuō)100vw在有縱向滾動(dòng)條的情況下，會(huì)比100%寬。 那么就會(huì)引發(fā)一個(gè)問(wèn)題：pc端使用vw單位時(shí)，如果頁(yè)面內(nèi)容超出一屏長(zhǎng)度，出現(xiàn)了縱向滾動(dòng)條，同時(shí)有元素width:100vw， 則會(huì)導(dǎo)致出現(xiàn)條橫向滾動(dòng)條，因?yàn)樵兀?00vw + 滾動(dòng)條寬度）超出了viewport寬度。（移動(dòng)端滾動(dòng)條不占位，所以不會(huì)有這個(gè)問(wèn)題）不過(guò)pc端一般不需要彈性布局，還是盡量使用width:100%更保險(xiǎn)。

  • 根據(jù)CSS3規(guī)范,視口單位主要包括以下4個(gè):


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

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

  • vmin : 選取 vw 和 vh 中最小的那個(gè)

  • vmax : 選取 vw 和 vh 中較大的那個(gè)

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

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

兼容性

利用適口單位適配頁(yè)面

對(duì)于移動(dòng)端開發(fā)來(lái)說(shuō)，最為重要的一點(diǎn)是如何適配頁(yè)面，實(shí)現(xiàn)多終端的兼容，不同的適配方式各有千秋，也各有缺點(diǎn)。

就主流的響應(yīng)式布局、彈性布局來(lái)說(shuō)，通過(guò)Media Queries 實(shí)現(xiàn)的布局需要配置多個(gè)響應(yīng)斷點(diǎn)，而且?guī)?lái)的體驗(yàn)也對(duì)用戶十分的不友好:布局在響應(yīng)斷點(diǎn)范圍內(nèi)的分辨率維持不表，而在響應(yīng)斷點(diǎn)切換的瞬間，布局帶來(lái)斷層式的切換變換，如同卡帶的唱機(jī)般"咔咔咔"地一又一下。

而通過(guò)采用rem單位的動(dòng)態(tài)計(jì)算的彈性布局,則是需要在頭部?jī)?nèi)嵌一段腳本來(lái)進(jìn)行監(jiān)聽分辨率的變化來(lái)動(dòng)態(tài)改變根元素字體大小，使得CSS于JS耦合了在一起。

有沒有辦法能夠解決這樣的問(wèn)題呢？

答案是肯定,通過(guò)利用適口單位實(shí)現(xiàn)適配的頁(yè)面,是既能解決響應(yīng)式斷層問(wèn)題，又能解決腳本依賴的問(wèn)題的。

用法以iPhone6為基準(zhǔn)(750)

第一步一般來(lái)說(shuō)，我都會(huì)對(duì)移動(dòng)端進(jìn)行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">

因?yàn)閕Phone6以及大多數(shù)的dpr為2,為了第二步的方便進(jìn)行換算

第二步設(shè)置body、html的font-size

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

13.3333333333333vw怎么來(lái)?

  • 適口為100vw,以iPhone6 750px基準(zhǔn)

  • 適口/iPhone6

    • 100vw / 750 = 0.133333333333333vw

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

  • 100px / 750 = 0.133333333333333px

  • 就是1px = 0.133333333333333vw

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

  • 最終于得出 100px = 1rem

通過(guò)這樣子換算我們利用vw把rem轉(zhuǎn)換成了以100px為基準(zhǔn)

那么在項(xiàng)目上就很好地可以進(jìn)行使用了

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

看完了這篇文章，相信你對(duì)“怎么利用vw+rem進(jìn)行移動(dòng)端布局”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站題目：怎么利用vw+rem進(jìn)行移動(dòng)端布局-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)于：http://muchs.cn/article10/ddscgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、關(guān)鍵詞優(yōu)化、做網(wǎng)站、面包屑導(dǎo)航、移動(dòng)網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化