PC端/移动端适配如何进行配置?

参考文章

5 分钟过下移动端适配方案 - 掘金

一篇文章搞懂，vue中pc端与移动端适配解决方案(亲测有效) - 掘金

移动端适配

媒体查询方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* <375px */
@media screen and (max-width:375px) { 
  .box {
    width: 100%;
  }
}
/* >=375px and <450px */
@media screen and (min-width:375px) and (max-width:450px) {
  .box {
    width: 90%;
  }
}
/* >=450px */
@media screen and (min-width:450px) {
  .col{
    width: 80%;
  }
}

缺点

  1. 页面上所有的元素都得在不同的 @media 中定义一遍不同的尺寸，代价有点高。
  2. 如果再多一种屏幕尺寸，就得多写一个 @media 查询块。

rem方案

  1. 安装插件
1
2
npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev
  1. 在main.js中引入amfe-flexible, 该插件会根据不同设备的屏幕宽度来设置html的font-size值
1
import 'amfe-flexible';
  1. 在postcss.config.js文件中配置postcss-pxtorem

postcss-pxtorem是一个能将px转换为rem的工具

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue({ file }) {
      // 判断是vant文件的样式，还是我们的样式，来决定rootValue的大小
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'] // 需要被转换的属性
    }
  }
}

也可以在 vite.config.js 中配置 postcss-pxtorem

1
2
3
4
5
6
7
8
9
10
11
// 在vite.config.js中配置postcss-pxtorem
css:{
    postcss:{
      plugins:[
        postCssPxToRem({
          rootValue:37.5,
          propList:['*'],
        })
      ]
    }
  }
  1. public/index.html添加viewport元数据标签，使页面宽度和设备宽度一致
1
2
3
4
5
6
7
8
9
10
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<!--
含义如下：
* width=device-width：视口宽度和设备保持一致
* initial-scale=1：视口的默认缩放比例1.0
* maximum-scale=1：最大缩放比例1.0
* minimum-scale=1：最小缩放比例1.0
* user-scalable=no：不允许用户自行缩放
-->

执行上述步骤之后，就可以使用px进行开发了, px单位会被自动转换成rem单位。

viewport方案

  1. public/index.html添加viewport元数据标签，使页面宽度和设备宽度一致
1
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  1. 安装插件
1
npm install postcss-px-to-viewport --save-dev
  1. 在postcss.config.js文件中配置postcss-px-to-viewport
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = ({ file }) => {
  const vwUnit = file && file.indexOf('vant') !== -1 ? 375 : 750;
  return {
    plugins: {
      'postcss-px-to-viewport': {
        viewportWidth: vwUnit, // 设计稿的宽度
        unitPrecision: 5, // 转换后的位数，即小数点位数
        viewportUnit: 'vw', // 转换成的视窗单位
        propList: ['*'], // 要进行转换的属性，如果某个属性不进行转换，只需在其前加个“!”即可
        selectorBlackList: [], // 不进行转换的选择器
        minPixelValue: 1, // 小于或等于1px则不进行转换
        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      },
    },
  };
};

执行上述步骤之后，就可以使用px进行开发了，px单位会被自动转换成vw单位。

补充

amfe-flexable是阿里发布的一套可伸缩适配方案。

它能根据设备的宽高来设置页面body元素的字体大小，将1rem设置为设备宽度/10以及在页面大小转换时可以重新计算这些数值。

postcss-pxtorem是postcss的一个插件，可以将对应的像素单位转换为rem。

在vite中可以直接对其进行配置，因为vite已经集成了postcss。

其中最重要的配置属性为：

  • rootValue：根元素的值，即1rem对应的像素值大小。一般设置为设计稿尺寸/10以及一些其他属性：
  • propList：需要进行转换的css属性的值，可以使用通配符。如：*意思是将全部属性单位都进行转换；
1
["*position*"]`会匹配到`background-position-y
  • selectorBlackList：不进行单位转换的选择器。如设置为字符串body，则所有含有body字符串的选择器都不会被该插件进行转换；若设置为[/^body$/]，则body会被匹配到而不是.body
  • exclude：不需要进行单位转换的文件
  • mediaQuery：是否允许像素在媒体查询中进行转换

PC端适配

rem方案

  1. 安装依赖
1
2
pnpm add amfe-flexible // CSS单位自适应转换插件 负责更改根font-size
pnpm add postcss-pxtorem // 如果版本过高可以降版本下载5.1.1版本 负责将px转成rem
  1. 在main.js中引入amfe-flexible
1
import "amfe-flexible"

amfe-flexible 等价代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// import '@/utils/rem.js'

// 在utils文件夹下创建rem.js
// 设置 rem 函数
function setRem() {
    // 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16
    const screenWidth = 1920
    const scale = screenWidth / 16
    const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
    // 得到html的Dom元素
    const htmlDom = document.getElementsByTagName('html')[0]
    // 设置根元素字体大小
    htmlDom.style.fontSize = htmlWidth / scale + 'px'
  }
  // 初始化
  setRem()
  // 改变窗口大小时重新设置 rem
  window.onresize = function() {
    setRem()
  }
  1. 配置vue.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/***
注意点：
（1）rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为1920，即rootValue设为192；
（2）propList是设置需要转换的属性，这边*为所有都进行转换。
***/
module.exports=function(){
    devServer:{
        port:3000,
        open:true
    },
    //rem配置
    css: {
        loaderOptions: {
         postcss: {
            plugins: [
              require('postcss-pxtorem')({
                  rootValue: 149, //根元素字体大小
                  propList: ['*'], //可以从px转换为rem的属性，匹配正则
                  // unitPrecision:5, //允许rem单位增长的十进制数字
                  // replace:true, //替换包含rems的规则，而不添加后备
                  // mediaQuery:false, //允许在媒体查询中转换px
                  // minPixelValue:0, //设置要替换的最小像素值
                  // selectorBlackList:[], //忽略转换正则匹配项
                  // exclude:/node_modules/i  要忽略并保留为px的文件路径
              })
            ]
         }
       }
    },
}

存在问题

不能使用行内样式

对于行内样式，阿里手淘并不能将px转rem，所以对于需要自适应的样式，如font-size、width、height等请不要写在行内。同理，对于不需要转化的样式可以写在行内，或者使用PX（大写）作为单位。

暂未找到可以转行内rem的插件。

viewport方案

  1. 安装
1
pnpm add postcss-px-to-viewport -D
  1. 与src同目录 新建postcss.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export const plugins = {
  'postcss-px-to-viewport': {
    unitToConvert: 'px', // 需要转换的单位，默认为"px"
    viewportWidth: 1494, // 设计稿的视口宽度
    unitPrecision: 5, // 单位转换后保留的精度
    propList: ['*'], // 能转化为vw的属性列表
    viewportUnit: 'vw', // 希望使用的视口单位
    fontViewportUnit: 'vw', // 字体使用的视口单位
    selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
    minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
    mediaQuery: false, // 媒体查询里的单位是否需要转换单位
    replace: true, //  是否直接更换属性值，而不添加备用属性
    exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
    include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
    landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
    landscapeUnit: 'vw', // 横屏时使用的单位
    landscapeWidth: 1494 // 横屏时使用的视口宽度
  }
}

可以看看这篇文章 ~~ 比较全

移动端适配及PC端适配心得总结体会(一) (可能比较全 - 掘金

工程化
#项目
PC端/移动端适配如何进行配置?
http://example.com/2023/12/19/讲讲移动端PC端适配/
作者
weirdo
发布于
2023年12月19日
更新于
2023年12月19日
许可协议