我们所做的页面最终要实现的效果是在各种机型下面都需要良好的展现，并非只存在于指定的屏幕大小，若解决这个问题我们就需要进行移动端页面的适配，今天我们就来共同探讨一下关于移动适配的知识吧！

一. px、em、rem、vh、vw的区别？

px:一像素就是1px。
em:根据父级dom元素的大小来进行变化。
rem:指根据根节点的大小来进行变化
vh:指的是浏览器可视范围的高度
vw:指的是浏览器可视范围的宽度

举例说明一下这些单位的区别：

<div class="father">
  <div class="child"></div>
</div>

假设类名为father的元素字体大小为18px,那么我们在类名为child元素使用em单位的时候可以这样理解： 1em=18px， 2em=36px， 3em=54px， ...以此类推，可以说明类名为child的元素会跟着它的父级元素来进行变化是父级元素的2倍。

<html>
  <body> 
    <div class="father">
      <div class="child"></div>
    </div>
  </body>
</html>

当我们不对html根节点进行任何尺寸的改变的时候，我们的根节点在每个浏览器都是16px; 如果根节点改变这个时候我们的1rem是多少？ 1rem=16px;2rem=32px;

提问：就跟据以上案例提出疑问，如果你对class名为father的类进行修改的时候，会影响到rem吗？

回答：不会因为rem根据的是根节点的变化而变化，只改变父级元素的话是没有影响的。

<div class="father>
  <div class="child"></div>
</div>

css样式为：

.child{
  width:100vw;
  height:100vh
}

对以上的样式设置是如何理解的呢？

相当于把一个浏览器的可视范围分成100份的宽度和高度，然后设置100vw就是将其占满了，占据整个屏幕的宽度，高度同理。如果我们设置50vw，就是指在100份的宽度里，占满50份。

！！！给child元素设置100%的宽度和100vw的区别是什么呢？

100%的宽度或者100%的高度，是根据父元素来设置的百分比宽度，例如父级元素的宽度是1000px,child设置为100%就代表宽度为1000px，如果为60%，那么宽度就是600px,vw是不受影响的，因为vw,vh是根据浏览器的可视范围去分配的宽度和高度的。

二.移动端适配方案js代码

点击此处可找到所需的代码片段：

blog.csdn.net/fanlao4203/…

点击此处可找到px转换成rem代码片段：

blog.csdn.net/m0_54089303…

实现步骤如下： 1.安装


1.  npm install postcss postcss-pxtorem --save
2.  npm install amfe-flexible --save
3.  npm install autoprefixer --save

-D 相当于 --save-dev 安装到package.json的devDependencies

-S 相当于 --save 安装到package.json的dependencies

2.在vite.config.js配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postCssPxToRem from "postcss-pxtorem"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 37.5, // 1rem的大小, 根元素的值，即1rem对应的像素值大小。一般设置为设计稿尺寸/10
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
        })
      ]
    }
  },
})

以上是个人对移动端适配的一些认知，大家多多来讨论！感谢

vue移动端页面的适配你了解多少？