适应性布局

作者:Yuan Tang

更新于:9 个月前

字数统计:804 字

阅读时长:2 分钟

移动端要求能够做到适应性布局，在大屏端能够实现盒子一行多展示几个，而非让盒子宽高变得更大。

rem

移动端适配布局方案无非就是通过 display:flex 、百分比、rem 、vw 和 vh 实现，其中，rem 它是相对于文档根元素（<html>元素）的字体大小来计算的长度单位。

其本质是为了更好地实现响应式设计，让网页元素的尺寸能够根据根元素的字体大小进行相对调整，以适应不同设备和屏幕尺寸。通过设置根元素的字体大小，可以统一调整整个页面中rem单位的值，从而方便地实现页面元素的自适应布局。

在项目的 index.html 文件中获取页面宽度，通过计算得到对应比例的尺寸，添加到根元素的 fontSize 上。再为根元素绑定 resize 事件，页面视口发生改变时重新计算根元素最新的字符大小。

html

<script>
  const getFontSize = () => {
    let width = document.body.clientWidth;
    let fontSize = (width / 750) * 16;
    document.documentElement.style.fontSize = fontSize + "px";
  }
  getFontSize()
  window.addEventListener('resize', getFontSize)
</script>

后续在 VsCode 下载一个插件 —— px to rem & rpx & vw (cssrem)，可通过设置默认转换尺寸帮助计算 px 转 rem 后的值，无需手动计算。设置单位为 rem 后保存运行，页面有效果了。

@medis

设置了 rem 适应性布局有了效果，但是当放到大屏上时，可以看到页面宽度变大，页面内的盒子元素与字体也都变大，这不是一个好的设计，对于用户来说，他们放到大屏幕上时希望看到的不是更大的字体和盒子，而是更多的内容。这不是数据大屏项目，因此不能这么做。

项目中我的做法是配合媒体查询，每隔 200px 设置一次，修改盒子的宽度，父盒子设置 display: flex ，子盒子设置百分比宽度，通过修改百分比实现在更大的屏幕中展示更多的盒子元素，而不是更大的内容。

拓展：postcss-pxtorem

在数据大屏项目中，无需手动把 px 单位转为 rem 单位，可以通过第三方库 postcss-pxtorem 实现自动转换功能。

下载依赖：

pnpm i postcss-pxtorem

在 vite.config.js 文件引入依赖：

import postcsspxtorem from 'postcss-pxtorem'

使用：

export default defineConfig({
  // ...
  css: {
    postcss: {
      plugins: [
        postcsspxtorem({
          rootValue: 16,
          unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
          propList: ['*'], // 需要转换的属性列表，*表示全部（如果设置width，则width的值会被转换）
          selectorBlackList: ['ignore'], // 指定不需要转换的类
          replace: true, // 是否直接更换属性值，而不添加备用属性
          mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
          minPixelValue: 0, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
          exclude: /node_modules/i // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
        })
      ]
    }
  }
})

保存运行项目，可以发现项目运行后会自动把 px 转换为 rem ，打包后也能自动转换。

Contributors

Yuan Tang

适应性布局 ​

rem ​

@medis ​

拓展：postcss-pxtorem ​

Contributors ​

适应性布局

rem

@medis

拓展：postcss-pxtorem

Contributors