实现css样式自适应方案

之前项目实现的css自适应方案,为了防止遗忘个人记录mark一下
下载pxtorem 插件 打开插件扩展 px-per-rem 设置80

vue项目中根目录下新建postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      rootValue: 80,
      propList: ["*"],
    },
  },
};

下载安装
npm i -S amfe-flexible

main.js中引入
import "amfe-flexible/index.js";

在node_modules中找到amfe-flexible/index.js文件 
var rem = docEl.clientWidth / 10改成var rem = docEl.clientWidth / 24

这样后就能粗略实现px转成自适应rem的问题,至于这样改完后的样式只能说勉强能用,但还有好多地方需要微调  这时候就要搭配上媒体查询一起使用
例如

媒体查询最大宽度为1024的时候进行细微调整,写在正常css后面进行样式覆盖重写
(当然为什么上面的参数要改成80我也不知道,反正秉承着程序员的原则 能用就行)

  • 10
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值