移动端rem适配

  1. 安装插件
# npm
npm install amfe-flexible -S 
npm install postcss-px2rem -S

# yarn
yarn add amfe-flexible
yarn add postcss-px2rem -D
  1. 在main.js中引入文件
import 'amfe-flexible'
  1. 配置postcss-px2rem
# vue.config.js文件
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
         pxtorem({
           rootValue: 75, // 设计图的宽度/10
           propList: ['*', '!border*'], // 不匹配边框
         })
        ]
      }
    }
  }
}
# 在css中,使用`/*no*/`表示该属性不进行rem转换
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 首先设置根节点字体 之后vscode安装cssrem插件,在文件》设置》cssrem里设置字体为50即可动态计算r...
    Ren_YC阅读 2,578评论 0 0
  • 移动端适配都用的时rem来做,在你的项目中只需要引用下面的js,即可适配成功。代码时已iphone6来做的,fon...
    leesession阅读 5,668评论 0 0
  • 三:多屏适配布局问题 出处:【原创】移动端高清、多屏适配方案 再谈移动端适配和点5像素的由来 使用相对单位:rem...
    木利阅读 4,318评论 0 0
  • 又是一个下雨天,这个春天有点长,让人觉得太长了,有点厌烦。一个人蜷缩在床上翻着杨绛先生的《我们仨》,看着看着有点难...
    子川vs玄冰阅读 2,812评论 0 0
  • 人生在世,有太多重要的事情,也有太多重要而紧急的事情,两者选其一,应该先做哪一件?我想绝大部分的人会说先做后者。比...
    石立涛阅读 1,720评论 0 0

友情链接更多精彩内容