前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

分享一篇移動端適配的多個方案，也可以說說你是怎麽做的。

正文

為什麽要做移動端適配？

目前市面上移動端螢幕尺寸非常的繁多，很多時候我們希望一個元素在不同的螢幕上顯示不同的大小以此來更好的還原效果圖：

當前流行的幾種適配方案

rem + 動態設定 font-size

rem 單位是相對於 html 元素的 font-size 來設定的，透過在不同螢幕尺寸下，動態的修改 html 元素的 font-size 以此來達到適配效果

在開發中，我們只需要考慮兩個問題：

font-size 的尺寸

px 與 rem 的單位換算

方案一：媒體查詢

思路：透過媒體查詢來設定不同尺寸螢幕下 html 的 font-size

缺點：

@media screen and (min-width: 320px) {
html {
font-size: 20px;
}
}
@media screen and (min-width: 375px) {
html {
font-size: 24px;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 28px;
}
}
@media screen and (min-width: 480px) {
html {
font-size: 32px;
}
}
.box {
width: 5rem;
height: 5rem;
background-color: blue;
}




方案二：編寫 js 程式碼

思路：透過監聽螢幕尺寸的變化來動態修改 html 元素的 font-size 大小

方法：

functionsetRemUnit() {
// 獲取所有的 html 元素
const htmlEl = document.documentElement
// 375 -> 16px
// 320px -> 12px
// 我們需要動態更改字型大小，因此需要獲取網頁的寬度
// 拿到客戶端寬度
const htmlWidth = htmlEl.clientWidth
// 將寬度分成10份
const htmlFontSize = htmlWidth / 10
console.log('htmlFontSize', htmlFontSize);
// 將值給到html的font-size
htmlEl. style.fontSize = htmlFontSize + 'px'
}
setRemUnit()
// 給 window 添加監聽事件
window.addEventListener('resize', setRemUnit) 

方案三：lib-flexible 庫

lib-flexible 是淘寶團隊出品的一個移動端自適應解決方案，透過動態計算 viewport 設定 font-size 實作不同螢幕寬度下的 UI 自適應縮放。

(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
functionsetBodyFontSize () {
if (document.body) {
document.body. style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
functionsetRemUnit () {
var rem = docEl.clientWidth / 10
docEl. style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement. style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl. classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document)) 





vw 適配方案

100vw 相當於整個視口的寬度 innerWidth，1vw 相當於視口寬度的 1%，將 px 轉換為 vw 即可完成適配，其實上面的 rem 就是模仿 vw 方案

vw相比於rem的優勢：

px 與 vw 的單位轉換

手動換算

比如螢幕尺寸為 375px，元素大小為 150px，我們需要將 150px 轉換成對應的 vw 值： 150 / 3.75=40

less/scss 函式

@vwUnit: 3.75;
.pxToVw(@px) {
result: (@px / @vw) * 1vw
}
.box {
width: .pxToVw(100)[result];
height: .pxToVw(100)[result];
} 


postcss-px-to-viewport-8-plugin

vs Code 外掛程式

px to vw 外掛程式，在編寫時自動轉化：

關於本文

作者： 專寫BUG

https://juejin.cn/post/7335245199109652516

結語

我是林三心

廣州的兄弟可以約飯哦，或者約球~我負責打鐵，你負責進球，謝謝~