移動端web適配

2021-07-31 10:24:13 字數 3265 閱讀 5231

移動端web適配我了解的總共有4種方法：

首先在做移動端開發的時候一定會加上viewport：

name="viewport"


content="width=width-device,initial-scale=1;minimum-scale=1,maximum-scale=1,user-scalable=no"/>
但是會有如retina屏這種高畫質螢幕的出現，他會把畫布的大小放大到原來的2倍，也就是說現在我寫的css裡的1px在螢幕上展示的是2px的寬度。

為了在螢幕上仍顯示1px的邊框，就只能對頁面進行縮小，即縮放比例設為0.5：

name="viewport"


content="width=width-device,initial-scale=0.5;minimum-scale=0.5,maximum-scale=0.5,user-scalable=no"/>
這裡有乙個新名詞：縮放比，js可以通過window.devicepixelratio來獲得。比如上面提到的retina螢幕的dpr就是2，那麼我們的縮放比例設為1/2。因此我們就要動態獲取裝置的dpr，並設定meta：

var dpr = 1/window.devicepixelratio;


meta.setattribute('content', 'initial-scale=' + dpr + ', maximum-scale=' + dpr + ', minimum-scale=' + dpr + ', user-scalable=no')
解決完畫素顯示的問題，接下來就是使用rem來進行布局。

rem是根元素的字型大小，其他所有的布局尺寸都使用rem來布局。

比如我們現在設定html元素的font-size為16px：

html
那麼此時1rem = 16px。其他需要適配的元素的寬高都使用rem來定義：

#element
那麼此時element的寬高都是160px，這就實現了根據rem來配置元素的大小。

那麼如何實現適配呢？

由於所有元素及字型的大小都是由rem決定的，那我們就要根據螢幕寬度來設定rem大小，這樣頁面就隨螢幕寬度來適配了。

一般我們都先以乙個確定的螢幕來作為參考，比如我們拿到的設計稿寬度為375px，這是iphone6的螢幕寬度。此時我們設定乙個rem的基準值，比如寬度/10:

rem =window.innerwidth/10;
此時rem基準值為37.5px。

如果設計稿中乙個元素的大小為90px，那我們就需要做乙個轉換，90px轉換為多少rem？

90/37.5


rem
此時我們就要設定這個元素的大小為90/37.5 rem。

因此這個計算過程就是：

一般我們可以使用sass來完成px轉換到rem的這個過程：

@function


px2rem


($px)
這樣，當我們寫具體數值的時候就可以寫成：

#element
對於沒有使用sass的工程，可以將html的font-size設定為100px，這樣在寫單位時直接將px大小除以100即可。

根據標準的375px的設計稿，我們已經完成了px到rem的轉換，那麼相對於其他螢幕的適配也都已經完成的。rem為螢幕寬度/10，而所有元素大小又是以rem標註的，這樣就實現了對於不同螢幕寬度的適配。

那麼針對不同的螢幕我們是怎麼動態的設定rem大小的呢？一般有兩種辦法：

@media (min


-device


-width : 375px) and (max


-device


-width : 667px) and (-webkit


-min


-device


-pixel


-ratio : 2)


}
document.getelementbytagname('html')[0].style.fontsize = window.innerwidth/10;
在使用js來設定時，需要繫結頁面的resize事件來達到變化時更新html的font-size。

總結一下根據rem適配的步驟：

因此，rem布局這種方式需要在頭部嵌一段指令碼來監聽螢幕解析度的變化，從而動態改變根元素字型大小。這樣的方式使得css與js耦合在了一起。

我們可以使用vw作為唯一的css單位。

1.對於設計稿的尺寸轉換為vw單位，可以使用sass編譯。

//iphone 6尺寸作為設計稿基準


$vw_base:375;


@function 2vw


($px)
2.將文字、布局等尺寸改用vw作為單位：

html


div
最後可以針對高清屏的一些邊框要顯示1px的需求，使用 transform 屬性 scale 實現

.box


}
這樣的頁面雖然看起來適配得很好，但是你會發現由於它是利用視口單位實現的布局，依賴於視口大小而自動縮放，無論視口過大還是過小，它也隨著視口過大或者過小，失去了最大最小寬度的限制。

因此可以考慮rem與vw結合的方式：

1. 給根元素字型大小設定隨著視口變化而變化的 vw 單位，這樣就可以實現動態改變其大小。

2. 限制根元素字型大小的最大最小值，配合 body 加上最大寬度和最小寬度

$vm_fontsize: 75; // iphone 6尺寸的根元素大小基準值


$vm_design: 750;


html 


@media screen and (min


-width: 540px) 


}//根據設計稿，將所有尺寸單位轉換為vw的函式


@function rem($px)
參考文章

純css3使用vw和vh視口單位實現自適應

web移動端適配入門

乙個表示列印影象或顯示器單位面積上畫素數量的指數。一般用來計量電腦，電視機和手持電子裝置螢幕的精細程度。通常情況下，每英吋畫素值越高，螢幕能顯示的影象也越精細。它的值為 螢幕對角線解析度 螢幕尺寸。計算公式 例如 iphone5 的螢幕解析度為1136 x 640 螢幕大小為 4 英吋。可以由下公式...

移動端 Web頁面適配

由於手機機型較多，各個手機的螢幕尺寸不一樣，所以做移動端頁面，需要考慮在安卓和ios的各種尺寸裝置的相容問題，我們要做的 web 頁面適配，就是為了在不同裝置上，頁面能夠保持統一展示效果，或等比縮放。常見的移動適配方案有以下幾種 2.1 viewport 可視區 最初手機端需要照顧 pc 端，如果不...

web移動端適配（騰訊方案）

那看我慢慢道來，不過在這之前，先要弄清楚幾個問題 1.vw單位是什麼？相對於視口的寬度，我們把整個視口寬均分成了100個單位的vw，也就是說1vw，相當於1 可視視窗寬。vw單位在安卓瀏覽器4.4 和chrome26.0 都開始被支援。要是放到了幾年前，假如我們要使用vw單位來做移動端的適配，很可能...