通过rem适配手机端

1.安装"@alitajs/hd"插件

2.在配置文件里配置

 

plugins: ['@alitajs/hd'],
hd: {
  px2rem: {
    rootValue: 100,
    selectorDoubleRemList: [/.ant-/],
  },
}

 

3.参考用less写公共方法

 

.px2rem(@px) {
  @var: unit(@px * 2) / 100;
  @rem: ~'@{var}rem';
}

 

4.某一个页面中

 

　.home__sec__tit {

 

  margin-top: .px2rem(100px) [@rem];
  width: .px2rem(375px) [@rem];
  text-align: center;
  height: .px2rem(30px) [@rem];
  font-size: .px2rem(24px) [@rem];
  font-weight: 600;
  color: #fff;
  line-height: .px2rem( 30px) [@rem];
}

 

5.原型 以页面375px为例，页面中的px均以375页面的大小