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 值。

rem的实现

css实现适配

插件实现适配

js实现适配

rem(倍数） = width / （html的font-size）=> width = (html的font-size) * rem(倍数)

猜你喜欢