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

這是在iPhone4中的顯示，

這是在iPhone6中的顯示，

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

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

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

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

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

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

總結(jié)

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

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