移动端自适应方案

移动端自适应目前主要有torem和toviewport两种方案,如果项目需要在宽屏上使用时优先使用rem,其他情况优先使用viewport

由于viewport单位得到众多浏览器的兼容,lib-flexible这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题。建议大家开始使用viewport来替代此方。

  • viewport 方案: postcss-px-to-viewport
  • rem 方案: amfe-flexible + postcss-pxtorem

依赖安装

公共依赖
  • autoprefixer:解析 CSS 文件并且添加浏览器前缀到 CSS 规则里( vue-cli 自带,无需安装;使用 vite 需要自行安装)
  • normalize.css:重置 CSS 样式
npm i  autoprefixer
npm i --save normalize.css
viewport 方案
npm install postcss-px-to-viewport -D
rem 方案

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。

npm i -S amfe-flexible
// 有宽屏显示竖屏需求则使用 npm i -S lib-flexible
npm i postcss postcss-pxtorem -D

配置和引入

main.js/main.ts
viewport 方案
import "normalize.css";
rem 方案
import "amfe-flexible";
// 有宽屏显示竖屏需求则使用 import "lib-flexible";
import "normalize.css";
postcss.config.js
viewport 方案
module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": { // 配置详情可见 https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md#%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0
      unitToConvert: "px",
      viewportWidth: 750, // 设计稿宽度
      unitPrecision: 5,
      propList: ["*"],
      viewportUnit: "vw",
      fontViewportUnit: "vw",
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [/node_modules/],
      include: undefined,
      landscape: false,
      landscapeUnit: "vw",
      landscapeWidth: 568,
    },
  },
};
rem 方案
module.exports = {
  plugins: {
    autoprefixer: {}, 
    "postcss-pxtorem": {
      rootValue({ file }) {
        return file.indexOf("vant") !== -1 ? 37.5 : 75; // 37.5用于兼容vant-ui,75基于750px设计稿
      },
      unitPrecision: 5,
      propList: ["*"], // 需要转换rem的元素
      // selectorBlackList: ["van-"],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0,
      exclude: /node_modules|floder_name/i,
    },
  },
};
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注