首页 > 其他分享 >Vue Cli4.5版本手机端适配(rem)

Vue Cli4.5版本手机端适配(rem)

时间:2022-08-31 16:36:59浏览次数:44  
标签:Vue amfe Cli4.5 适配 js rem flexible postcss pxtorem

1.安装amfe-flexible(根据屏幕动态改变根元素font-size,postcss-pxtorem把代码中px转为rem)

npm i amfe-flexible -S
2.安装postcss-pxtorem(一款 PostCSS 插件,用于将 px 单位转化为 rem 单位)

安装命令 npm i [email protected]

3.然后在main.js里引入amfe-flexible

import 'amfe-flexible'

4.在根目录新建一个postcss.config.js(和src,package.json等文件平级)

5.在postcss.config.js引入代码

module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue:75,
      propList: ["*"]
    },
  },
};
重启服务就行啦
原文链接:https://blog.csdn.net/weixin_52240193/article/details/121423351

标签:Vue,amfe,Cli4.5,适配,js,rem,flexible,postcss,pxtorem
From: https://www.cnblogs.com/zhang-hong/p/16643518.html

相关文章

  • 安装vue环境
    1)获取node.js安装包Node.js安装包及源码下载地址为:https://nodejs.org/en/download/(2)Linux上安装Node.jswgethttps://nodejs.org/dist/v16.13.1/node-v16.13.1-linu......
  • VUE---公钥私钥加密解密
    最近在开发一些项目,前后端数据分离开发项目,涉及到数据的安全性,需要考虑:1、前端提交数据,进行加密,后端解密。2、前端渲染数据,进行解密,后端加密。第一步:生成加密/解密公钥......
  • vue-cli 配置优化
    本文整理了一些vue开发中常用vue-cli配置,使用的vue-cli版本为3.11.0,主要内容包括:移除preload与prefetch使用webpack-bundle-analyzer做打包分析使用ters......
  • 区块相隔虽一线,俱在支付同冶熔,Vue3.0+Tornado6前后端分离集成Web3.0之Metamask区块
    最近几年区块链技术的使用外延持续扩展,去中心化的节点认证机制可以大幅度改进传统的支付结算模式的经营效率,降低交易者的成本并提高收益。但不能否认的是,区块链技术也存在......
  • Ant Design Vue 表单之a-input属性
    <a-form-itemlabel="姓名"><a-inputv-model.trim="name"placeholder="":max-length='10' :read-only='true'/>......
  • 用VUE开发页面的步骤 其实vue开发就是自定义组件,在App.vue中展示自定义的组件,打包时运
    用VUE开发页面的步骤这几天项目不是很忙,就研究了一下比较热门的vue,发现用vue开发页面其实和开发后台是一样也需要搭建开发环境,挑选ide,现总结一下开发步骤:1。搭建开发环......
  • vue2项目中富文本 tinymce
    一开始走了很多弯路,页面总是报各种各样的错,比如:UncaughtSyntaxError:Unexpectedtoken'<'后来发现对于vue2而言,tinymce的版本不能过高。于是,简化了一下,但是也还是......
  • Vue -- 监听隐藏显示窗口后重新请求数据
    为什么会用到监听隐藏显示窗口的事件呢?主要是因为页面中有计时器,窗口隐藏页面隐藏后,计时器暂停,这里使用了重新获取数据,重新启动倒计时的功能解决,所以需要监听事件。metho......
  • vue中render中src不生效问题解决
    在vue文件中写html代码的话可以直接用<imgsrc="xxx"/>但是在render中就不能正常工作。原理度娘上有,那render中要使用的话需要加requirerender<imgsrc={required(......
  • npm安装vue,在vue/dist目录下没有产生vue.js文件 npm init -y npm install vue@
    npm安装vue,在vue/dist目录下没有产生vue.js文件遇到问题:在进行npminstall时,vue/dist目录下没有生成vue.js的情况。解决办法:只在vue后面加上@2指定版本即可。npmi......