vue適配不同螢幕大小 移動端適配的幾種方案

2021-10-12 04:41:42 字數 2884 閱讀 8586

適配思路

設計稿（750*1334） ---> 開發 ---> 適配不同的手機螢幕，使其顯得合理

原則開發時方便，寫**時設定的值要和標註的 160px 相關

方案要適配大多數手機螢幕，並且無 bug

使用者體驗要好，頁面看著沒有不適感

思路寫頁面時，按照設計稿寫固定寬度，最後再統一縮放處理，在不同手機上都能用

按照設計稿的標準開發頁面，在手機上部分內容根據螢幕寬度等比縮放，部分內容按需要變化，需要縮放的元素使用 rem, vw 相對單位，不需要縮放的使用 px

固定尺寸+彈性布局，不需要縮放

viewport 適配

根據設計稿標準（750px 寬度）開發頁面，寫完後頁面及元素自動縮小，適配 375 寬度的螢幕

在 head 裡設定如下**

initial-scale = 螢幕的寬度 / 設計稿的寬度

為了適配其他螢幕，需要動態的設定 initial-scale 的值

缺點就是邊線問題，不同尺寸下，邊線的粗細是不一樣的（等比縮放後），全部元素都是等比縮放，實際顯示效果可能不太好

vw 適配（部分等比縮放）

開發者拿到設計稿（假設設計稿尺寸為750px，設計稿的元素標註是基於此寬度標註）

開始開發，對設計稿的標註進行轉換，把px換成vw。比如頁面元素字型標註的大小是32px，換成vw為 (100/750)*32 vw

對於需要等比縮放的元素，css使用轉換後的單位

對於不需要縮放的元素，比如邊框陰影，使用固定單位px

關於換算，為了開發方便，利用自定義屬性，css變數

注意此時，meta 裡就不要去設定縮放了

業務**裡就可以寫

header
實現了按需縮放

rem 適配

開發者拿到設計稿（假設設計稿尺寸為750px，設計稿的元素標是基於此寬度標註）

開始開發，對設計稿的標註進行轉換

對於需要等比縮放的元素，css使用轉換後的單位

對於不需要縮放的元素，比如邊框陰影，使用固定單位px

假設設計稿的某個字型大小是 40px, 手機螢幕上的字型大小應為 420/750*40 = 22.4px (體驗好)，換算成 rem（相對於 html 根節點，假設 html 的 font-size = 100px,）則這個字型大小為 0.224 rem

寫樣式時，對應的字型設定為 0.224 rem 即可，其他元素尺寸也做換算...

但是有問題

舉個 ，設計稿的標註 是40px，寫頁面時還得去做計算，很麻煩（全部都要計算）

能不能規定一下，看到 40px ,就應該寫 40/100 = 0.4 rem,這樣看到就知道寫多少了（不用計算），此時的 html 的 font-size 就不能是 100px 了，應該為 (420*100)/750 = 56px，100為我們要規定的那個引數

根據不同螢幕寬度，設定 html 的 font-size 值

對於需要等比縮放的元素，css使用轉換後的單位

header
對於不需要縮放的元素，比如邊框陰影，使用固定單位px

header > span.active
假設 html 的 font size = 1px 的話，就可以寫 28 rem 了，更方便了，但是瀏覽器對字型大小有限制，設為 1px 的話，在瀏覽器中是失效的，會以 12px（或者其他值） 做乙個計算 , 就會得到乙個很誇張的結果，所以可以把 html 寫的大一些

使用 sass 庫時

js 處理還是一樣的，但看著好看些

@function px2rem($px) 


header
以上的三種適配方案，都是等比縮放，放到 ipad 上時（設計稿以手機螢幕設計的），頁面元素會很大很醜，有些場景下，並不需要頁面整體縮放（viewport 自動處理的也很好了），所以有時只需要合理的布局即可。

彈性盒適配（合理布局）

使用 flex 布局

section
總結一下，什麼樣的頁面需要做適配（等比縮放）呢

換了螢幕後，到底有多寬多高很難去做設定，整體的都需要改變，所以需要整體的縮放

以上所有的適配都是寬度的適配，但是在某些場景下，也會出現高度的適配

比如大屏，需要適配很多的電視尺寸，要求撐滿螢幕，不能有滾動條，此時若換個螢幕

此時需要考慮小元素用 vh, 寬和高都用 vh 去表示，中間的大塊去自適應，這就做到了大屏的適配，螢幕變小了，整體變小了（體驗更好），中間這塊撐滿了螢幕

對於更複雜的場景，需要更靈活考慮，沒有一種適配方式可以囊括所有場景。

Vue移動端螢幕適配

第一步 在src路徑下新建乙個js資料夾，在建立乙個resize.js檔案 第二部 在resize.js檔案內寫入以下 function doc,win if doc.addeventlistener return domcontentloaded是firefox下特有的event,當所有dom解析...

移動端螢幕適配

rem單位介紹 rem font size of the root element 是相對長度單位。相對於根元素 即html元素 font size計算值的倍數 移動端主要根據iphone5來參考適配，在谷歌瀏覽器中，1rem 16px iphone5的寬度是320px,320 16 20 動態設定...

移動端螢幕適配

方法一 查詢 比如說我們設定了html，然後給具體的dom設定p，其實就相當於設定了p，也就是1rem 1 html的fontsize 2.5rem 2.5 html的fontsize html media only screen and min width 360px media only scr...