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 适配的方式需要两个步骤：
1.计算并设置根元素的 font-size 值。通常情况下，我们将根元素默认的 font-size 设置为 16px，然后通过 JS 计算出当前设备宽度下的根元素 font-size 值，再设置给根元素。
2.在需要使用 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 值。
