移动端自适应方案
本文最后更新于 671 天前,其中的信息可能已经有所发展或是发生改变。

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

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

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

依赖安装

viewport 方案
npm install @ttou/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: {
    "@ttou/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: 1920,
    },
  },
};
rem 方案
module.exports = {
  plugins: {
    "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,
    },
  },
};
暂无评论

发送评论 编辑评论


|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇