移动端自适应/适配方案【详解】(含多种方案对比，推荐 viewport 方案，postcss-px-to-viewport-8-plugin 的使用等)

news2024/9/27 18:54:16

为什么移动端需要自适应/适配？

因移动端

屏幕尺寸不同
屏幕分辨率不同
横竖屏

移动端自适应/适配方案

【必要】设置 meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

设置页面的宽度等于设备的宽度
不允许⽤户⼿动缩放

【推荐】viewport

即用 vh vw vmin vmax 单位

为了提升开发效率，通常使用插件实现 px 自动转换为 vw

1. 安装插件

npm install postcss-px-to-viewport-8-plugin -D

插件官网
https://www.npmjs.com/package/postcss-px-to-viewport-8-plugin

2. 添加配置

以 vite 项目为例，在 vite.config.ts 中

import postcsspxtoviewport8plugin from "postcss-px-to-viewport-8-plugin";

defineConfig 中与 plugins 属性并列添加

  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport8plugin({
          unitToConvert: "px",
          viewportWidth: (file) => {
            let num = 1920;
            if (file.indexOf("m_") !== -1) {
              num = 375;
            }
            return num;
          },
          unitPrecision: 5, // 单位转换后保留的精度
          propList: ["*"], // 能转化为vw的属性列表
          viewportUnit: "vw", // 希望使用的视口单位
          fontViewportUnit: "vw", // 字体使用的视口单位
          selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
          minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
          mediaQuery: true, // 媒体查询里的单位是否需要转换单位
          replace: true, //  是否直接更换属性值，而不添加备用属性
          exclude: [/node_modules\/ant-design-vue/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
          include: [], // 如果设置了include，那将只有匹配到的文件才会被转换
          landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
          landscapeUnit: "vw", // 横屏时使用的单位
          landscapeWidth: 1024, // 横屏时使用的视口宽度
        }),
      ],
    },
  },

启动项目后，可见页面中的 px 都变成了 vw

在这里插入图片描述

【已淘汰】css 的媒体查询 @media

需为不同尺寸的屏幕定义相关的样式，代价太高！

@media only screen and (min-width: 375px) {
 .logo {
 width : 62.5px;
 }
}
@media only screen and (min-width: 360px) {
 .logo {
 width : 60px;
 }
}
@media only screen and (min-width: 320px) {
 .logo {
 width : 53.3333px;
 }
}

【有缺陷】rem

相对于根元素的字体⼤⼩自适应变化

缺陷：不同的页面尺寸，需用 CSS 媒体查询 @media 定义不同的根元素的字体⼤⼩

@media only screen and (min-width: 375px) {
 html {
 font-size : 375px;
 }
}
@media only screen and (min-width: 360px) {
 html {
 font-size : 360px;
 }
}
@media only screen and (min-width: 320px) {
 html {
 font-size : 320px;
 }
}