前言

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

响应式布局。

• 常见的响应式布局，有 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.jsimport 'lib-flexible/flexible.js'

postcss-plugin-px2rem

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

• 安装

npm i postcss-plugin-px2rem

• 使用

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

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