【移动端适配】动态调整rem
移动端的项目,尺寸单位一般用rem和vw/vh比较多,这里说一下rem。
rem是html元素的字体大小,默认情况下是16px,但是不同大小的屏幕像素数量是不一样的。因此16px在不同设备中的观感就不一样。
今天看项目的时候看到src/utils/adapative.js里对于移动端的rem是这样定义的:
// 设计宽度
const designWidth = 375
// 设计字体大小
const designFontSize = 16
//向外输出一个获取rem具体数值的接口,以备不时之需
export function getFontSize () {
const { clientWidth } = document.documentElement
const fontSize = clientWidth * designFontSize / designWidth
return fontSize
}
// 将html元素的fontSize设置为根据屏幕大小动态计算出的值
function adjustFontSize () {
// 根据计算结果设置rem
const htmlEle = document.querySelector('html')
let fontSize = getFontSize()
htmlEle.style.fontSize = `${fontSize}px`
//当屏幕大发生变化时,重新计算rem
window.onresize = () => {
fontSize = getFontSize()
htmlEle.style.fontSize = `${fontSize}px`
}
}
//执行这个函数
adjustFontSize()
在根目录的main.js里执行这个脚本即可(@就代表src目录)
import '@/utils/adaptive.js'