CSS响应式布局之REM

2021-10-24 1,047 阅读1分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

在编写我们的移动页面的时候，往往需要对页面做一些自适应处理。以此在不同的屏幕大小下，展示相同的画面。这就涉及到我们今天所要讲到的响应式布局。

响应式布局。

常见的响应式布局，有REM、VW、REM + VW这么几种。

REM

相对长度单位的一种。rem（font size of the root element）是指相对于根元素的字体大小的单位。常见的还有em，相对于在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width。vw，相对于视窗宽度的1%。
根据 W3C 规范，一个对象单位的定义是: 相对于根元素上font-size的计算值。在根元素的font-size属性中指定时，rem单位是指属性的初始值这意味着1rem等于html元素的字体大小（对于大多数浏览器而言，其默认值为16px）。
接下给大家介绍一下REM的实现方案

lib-flexible

解决一些自适应问题。
首先，安装如下依赖，

npm i lib-flexible

引入

// main.js
import 'lib-flexible/flexible.js'

postcss-plugin-px2rem

将px转换成rem的一个postcss插件。
安装

npm i postcss-plugin-px2rem

使用

// vue.config.js
module.exports = {
  css: {
  loaderOptions: {
   postcss: {
    plugins: [
     require('postcss-plugin-px2rem')({
      rootValue: 108, // 根元素字体大小，设计稿的大小除以10
      exclude: /(node_module)/, // 排除某些文件夹
      minPixelValue: 3, // 替换的最小像素值,只对3px及以上的生效
     })
    ]
   },
  }
 },
}

好，今天就到这里了。Bye!

友情链接：