css实现适配
设备宽度大, 元素尺寸大
设备宽度小,元素尺寸小
目前rem布局方案中,将网页等分成10份, HTML标签的字号为视口宽度的 1/10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 */
@media (width:375px) {
html {
font-size: 40px;
}
}
@media (width:320px) {
html {
font-size: 30px;
}
}
</style>
</head>
<body>
</body>
</html>
插件实现适配
使用postcss-pxtorem插件
js实现适配
rem(倍数) = width / (html的font-size)=> width = (html的font-size) * rem(倍数)
使用 JavaScript 实现 rem 适配的方式需要两个步骤:
-
计算并设置根元素的 font-size 值。通常情况下,我们将根元素默认的 font-size 设置为 16px,然后通过 JS 计算出当前设备宽度下的根元素 font-size 值,再设置给根元素。
-
在需要使用 rem 单位的地方,根据计算得到的根元素 font-size 值,将需要设置的数值除以根元素 font-size 值,得到对应的 rem 数值。
具体的实现方式如下:
// 计算并设置根元素的 font-size 值
function setRemUnit() {
const baseSize = 16; // 默认基准字体大小
const designWidth = 375; // 设计稿宽度
const screenWidth = window.innerWidth; // 屏幕宽度
const fontSize = screenWidth / designWidth * baseSize;
document.documentElement.style.fontSize = fontSize + 'px';
}
setRemUnit(); // 页面加载时先执行一次
// 监听窗口大小变化,重新计算 font-size 值
window.addEventListener('resize', setRemUnit);
上述代码中,我们定义了三个变量:
baseSize
:默认的基准字体大小,即根元素默认的 font-size 值。designWidth
:设计稿的宽度,通常是 750 或者 375 等像素值。screenWidth
:当前屏幕的宽度,在浏览器中可以通过window.innerWidth
获取。
然后我们使用 setRemUnit()
函数计算并设置根元素的 font-size 值,最后监听窗口大小变化事件,当窗口大小发生变化时,重新计算并设置根元素的 font-size 值。