移动端 REM 适配

简介: 移动端 REM 适配

在做移动端项目的时候需要对不同规格的设备进行rem适配


方法:



// 安装
npm i amfe-flexible


// main.js中加载该模块
import 'amfe-flexible'


  • 使用 postcss-pxtorempx 转为 rem,但是该插件不能将行内样式px转为rem


// 安装
npm install postcss-pxtorem -D


// 配置
/**
 * PostCSS 配置文件
 */
module.exports = {
  // 配置要使用的 PostCSS 插件
  plugins: {
    // 配置使用 autoprefixer 插件
    // 作用:生成浏览器 CSS 样式规则前缀
    // VueCLI 内部已经配置了 autoprefixer 插件
    // 所以又配置了一次,所以产生冲突了
    // 'autoprefixer': { // autoprefixer 插件的配置
    //   // 配置要兼容到的环境信息
    //   browsers: ['Android >= 4.0', 'iOS >= 8']
    // },
    // 配置使用 postcss-pxtorem 插件
    // 作用:把 px 转为 rem
    'postcss-pxtorem': {
      rootValue ({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75
      },
      propList: ['*']
    }
  }
}
相关文章
|
4月前
|
前端开发 JavaScript
移动端适配方案,基于postcss
【8月更文挑战第9天】
95 2
|
5月前
|
前端开发
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
715 0
|
6月前
|
前端开发
|
7月前
|
移动开发 前端开发 UED
深入理解Rem适配:移动端网页设计的利器
深入理解Rem适配:移动端网页设计的利器
|
前端开发 JavaScript
6种解决移动端1px的方案
6种解决移动端1px的方案
204 0
|
前端开发
【前端】移动端适配方案-rem
【前端】移动端适配方案-rem
157 0
|
移动开发 前端开发
|
编解码 前端开发 JavaScript
css移动端适配最佳实践
移动端适配,在移动端里经常有遇到,在不同分辨率移动端设备精确还原UI设计稿,这是一个令人抓狂的问题,好在有flex,box布局解决了自适应很大一部分问题。
563 0
css移动端适配最佳实践
|
前端开发 JavaScript Android开发
|
前端开发 开发者 iOS开发
rem- 适配方式|学习笔记
快速学习 rem- 适配方式
202 0