XHappyness

如果不引入插件的话:ui稿的px转化成rem需自己计算

根据设计稿我们需要自己计算元素的rem(假如我们将html根元素font-size设置为41.4px);
那么1rem=41.4px; ui稿上的375px = 375/41.4rem=9rem;
这样每个元素进行计算是不是得疯,vant组件中推荐的适配方法:

postcss-pxtorem

  1. 安装yarn add postcss-pxtorem@5.1.1 -D
  2. postcss.config.js中配置
module.exports = {
  plugins: {
    autoprefixer: {
      Browserslist: ["Android >= 4.0", "iOS >= 7"],
    },
    "postcss-pxtorem": {
      rootValue: 37.5, //结果为:设计稿元素尺寸/37.5,比如元素宽375px,最终页面会换算成 10rem
      propList: ["*"],
    },
  },
};

该插件自动将 px 单位转化为 rem 单位;(注意目前版本要在6以下,不然postcss不支持会报错);
结果为:设计稿元素尺寸/37.5,比如元素宽375px,最终页面会换算成 10rem;
rootValue可以根据ui稿子进行调整:rootValue=ui稿子总宽度/10
如果不想被转换,那么px可以写成Px;

lib-flexible(已升级为amfe-flexible)

  1. 安装yarn add amfe-flexible
  2. public/index.html中引入viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  1. main.js中引入amfe-flexible
// 移动端适配
import "amfe-flexible";

该插件用于设置 rem 基准值;
我理解的是根据手机宽度=10rem进行换算;比如手机宽414px=10rem; 那么html的font-size=1rem=41.4px;
效果如下:

总结

经过postcss-pxtorem和amfe-flexible两个插件的适配,就能自动实现: ui稿的总宽度=10rem=10*(html font-size) -> 均代表浏览器的总宽度

我们假设ui稿子是这样的

那么插件自动适配计算大概是如下:

分类:

技术点:

h5

相关文章:

猜你喜欢