移动端适配

LuckyisLhh

已于 2022-10-26 17:11:39 修改

阅读量349

点赞数

分类专栏：适配问题文章标签：前端

于 2022-06-09 17:44:51 首次发布

本文链接：https://blog.csdn.net/LuckyisLhh/article/details/125207641

版权

lib-flexible postcss-pxtorem 移动端适配 rem px转换

关键词由CSDN通过智能技术生成

适配问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一利用lib-flexible加postcss-pxtorem

1. 首先在项目中引入lib-flexible

npm install lib-flexible -s

// mian.js 全局引入
import 'lib-flexible/flexible'

此时会使浏览器自动添加font-size属性

在这里插入图片描述

2. 引入postcss-pxtorem

接下来我们写样式的时候就都要用 rem 做单位，想想还是有点麻烦，有没有什么好办法还是正常写 px 单位，但是编译代码的时候能转化成 rem。 postcss-pxtorem 帮我们解决了这个棘手的问题，下面老规矩，先安装它：

npm install postcss-pxtorem -D

注意: 这里可能会导致报错，是因为版本太高,.可以改为npm install postcss-pxtorem@5.1.1 -D

3. 配置.postcssrc.js

在项目根目录下新建 .postcssrc.js 配置文件，配置代码如下：

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7'] /
    },
    'postcss-pxtorem': {
      rootValue: 37.5, // vant-UI的官方根字体大小是37.5
      propList: ['*']
    }
  }
}

这里也可能因为版本太高引起报错

Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option can cause errors. Browserslist config
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist

可以把 .postcssrc.js修改为：

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8"
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

之所以设置rootValue是因为写项目时一帮都是以iphone6/7/8为基准，而其width为375px,除以10得到37.5