前端人員在處理移動(dòng)端自適應(yīng)布局時(shí)，目前前端最流行的方法應(yīng)該就是使用媒體查詢，來設(shè)置HTML的字體大小，然后用rem為單位對(duì)Dom的寬高進(jìn)行設(shè)置，這個(gè)方法的優(yōu)勢(shì)在于兼容性方面很好，劣勢(shì)則在于當(dāng)前市場(chǎng)上不同的機(jī)型太多，尺寸種類比較雜，所以要想做到所以尺寸機(jī)型都能適應(yīng)，工作量相對(duì)比較大。目前也有人會(huì)選擇用百分比進(jìn)行布局，這個(gè)布局方法在僅僅處理元素的寬高上面非常好用，但是當(dāng)js中要對(duì)dom元素的尺寸進(jìn)行設(shè)置時(shí)，百分比的局限性就出來了，還有就是dom元素的font-size沒辦法用頁面寬度百分比對(duì)他進(jìn)行大小設(shè)置，也就是一個(gè)元素寬高在占比頁面50%時(shí)，一段文字會(huì)在不同寬度的手機(jī)屏幕上顯示不同的行數(shù)。如下：

這是在iPhone4中的顯示，

這是在iPhone6中的顯示，

因此如何讓頁面所有元素都能做到自適應(yīng)，這是目前需要解決的問題。這時(shí)候，C3中的一個(gè)新的長(zhǎng)度單位——VW。這個(gè)單位的說明是：相對(duì)于視口的寬度。視口被均分為100單位的vw，也就是說在375寬度的屏幕中，1vw等于3.75px，320的屏幕中，1vw等于3.2px。這樣的話對(duì)于不同尺寸的屏幕有了一個(gè)統(tǒng)一的單位來進(jìn)行衡量，這時(shí)我們?cè)俳Y(jié)合rem，即對(duì)HTML設(shè)置字體大小font-size：calc(100vw/18.75)——這是以iPhone6的尺寸為設(shè)計(jì)圖時(shí)做的計(jì)算，此時(shí)在iPhone6尺寸的頁面中1rem為20px；通過對(duì)設(shè)計(jì)圖的還原，此時(shí)頁面元素的大小已經(jīng)可以等比例適應(yīng)任意寬度的終端了。

這是通過這個(gè)設(shè)置在iPhone4中的顯示效果：

這是通過設(shè)置在iPhone6中的顯示效果：

我們可以看到，兩種機(jī)型上的顯示效果已經(jīng)完全一樣了。

當(dāng)然，這種方法目前存在的最大問題仍然是兼容問題

目前VW單位的兼容性仍然不容樂觀，但是對(duì)在做混合APP的部分同行來說，基本就不存在這個(gè)問題了，并且隨著設(shè)備的更新迭代，相信在將來通過這種方法進(jìn)行布局將會(huì)逐漸普及開來

總結(jié)

以上是生活随笔為你收集整理的js页面自适应屏幕大小_移动端自适应布局方法的calc()与vw的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。