前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~

分享一篇移动端适配的多个方案，也可以说说你是怎么做的。

正文

为什么要做移动端适配？

目前市面上移动端屏幕尺寸非常的繁多，很多时候我们希望一个元素在不同的屏幕上显示不同的大小以此来更好的还原效果图：

当前流行的几种适配方案

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

结语

我是林三心

广州的兄弟可以约饭哦，或者约球~我负责打铁，你负责进球，谢谢~