Vue -项目创建（rem适配项的设置）

3. 项目rem 配置

####3.1 rem介绍

小米、京东、携程 m.mi.com/m.jd.com/m.ctrp.com

核心原理

 1rem = 当前 html 的fontSize也就是说 : rem是相当于根元素的字体大小// 使用div {width:2rem;height:2rem}// 媒体查询@media (min-width:320px) {html {font-size : 20px}}@media (min-width:640px) {html {font-size : 40px}}

作用 :

保证适配所有的屏幕, 而且几乎完全的还原了设计图,  体验好

rem的痛点

1. 使用rem开发没有px开发爽
2. 需要做不同屏幕的适配 (需要给每个屏幕都设置一个html的fontSize 媒体查询)
3. 开发的时候, 设计图量出来的都是px, 还需要转化为rem单位 (依赖 px2rem)解决办法 : 基于webpack配置rem环境, 变得自动化

3.2. rem的配置 (webpack环境下的配置)

安装包 :

npm i lib-flexiblelib-flexible这个包是阿里开源的一个库, 自动给不同屏幕设置html的fontSize

引入 lib-flexible

// main.js   自动适配所有屏幕
import 'lib-flexible'

打开浏览器就可以看到 html 上的 font-size

他会给每个屏幕都设置一个html的大小, 会把屏幕的宽度大小/10 = 1rem

lib-flexible会自动帮我们设置视口, 所以需要把原来的额视口删除, index.html的viewport

320 * data-dpr = 640 /10 => 64

给一个div设置样式

.one {width:200px;height:200px;
}
// 发现切换没有反应, 因为没有设置为 rem单位

安装第二个库 : 这个包会自动把我们项目中的px转化为rem单位

npm i postcss-px2rem

vue.config.js里面做配置

module.exports = {devServer: {open: true,},// 配置 px 转 rem 的css: {loaderOptions: {css: {},postcss: {plugins: [require('postcss-px2rem')({// rem 的单位  填设计稿的 1/10remUnit: 75,}),],},},},
}//这个值改怎么填
屏幕标准 : 375
设计稿 750   => 量的尺寸 200px  => 实际上100px
设计稿 640   => 量的尺寸 200px  => 实际上117px
设计稿 375   => 量的尺寸 200px  => 实际上200px