vue_cli3中使用rem

作者: 打哑谜 | 来源:发表于2019-10-10 14:48 被阅读0次

vue_cli3中使用rem
使app端可适应不同分辨率大小
关于使用rem的一点注意事项
移动屏幕适配方案
手机屏幕适配方案 ( REM )
移动端rem.js
rem与em区别
使用postcss-px2rem无法转换vue模板文件中的scs
移动端自适应解决方案
VUE手机端使用rem

1、安装lib-flexible

npm i -S amfe-flexible

2、在main.ts中引入

import  'amfe-flexible'

3、安装postcss-pxtorem

npm install  postcss-pxtorem --save-dev

4、在根目录下的vue.config.js（没有就新建一个）

module.exports = {
  css: {
    postcss: {
      plugins: [
        require('postcss-pxtorem')({
          rootValue: 100, // 换算的基数（我的需要应用到大屏，设计图为1920*1080，一般移动端的设计图为750px，这个数值为37.5）
          selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
          propList: ['*']
        })
      ]
    }
  }
}

vue_cli3中使用rem
1、安装lib-flexible 2、在main.ts中引入 3、安装postcss-pxtorem 4、在根目录...
使app端可适应不同分辨率大小
css中单位同一使用rem
关于使用rem的一点注意事项
使用场景，思路可以参考其他大神的文章，这篇文章分享下使用过程中的问题。可以只使用rem，或者使用rem+devic...
移动屏幕适配方案
1,使用rem+媒体查询实现 2,使用rem+js实现 3,使用rem+vw实现 rem是什么是一个相对单位参照根...
手机屏幕适配方案 ( REM )
REM 简介 rem 是屏幕适配中得到重用的长度单位。使用 rem 前端开发者可以很方便的在各种屏幕尺寸下，通过等...
移动端rem.js
使用 rem.js 文件1：rem.js 或者文件2：rem.js
rem与em区别
响应式Web设计—px-em-rem三者区别及rem的使用在css中单位长度用的最多的是px、em、rem，这三个...
使用postcss-px2rem无法转换vue模板文件中的scs
移动端的项目使用postcss-px2rem将px转换成rem,使用css时可以转换成rem但使用scss缺无法将...
移动端自适应解决方案
方案一使用vw 和 rem结合方案二 JS + rem结合
VUE手机端使用rem
注：若要使用sass，先配置rem安装px2rem 在项目入口文件main.js中引入lib-flexible 在...