前端开发中 H5 是什么，这个问题云哥刚干前端的时候怎么也理解不了， 到底是html5还是什么东西 。

我告诉大家答案， 一般在前端业内我们说的h5其实就是移动端网页， 就是正常vue react 做的项目，不过是放在移动端打开的，开发的时候就正常开发，把浏览器设备工具栏打开，尺寸选择手机相关的比如iphone12pro 开发就完了，其实就是网页，不过是竖过来显示和开发。 就像pdd别人发你砍一刀的链接，你手上打开就是个网页，那就是h5。

那么每个人手机不一样就会有手机机型的尺寸适配问题的，一般简单的h5网页你正常写px都可以，因为手机大小差不不是很大。 但是复杂的就要适配了，适配的话实际前端开发中一般用postcsspxtorem插件，这个可以把你写的px转换成rem，rem就是根据不同手机本身的字体自动调节尺寸，自动适配了，就很方便。

h5需要投放在移动端，需要考虑如何尺寸适配，一比一的复制设计稿

postcsspxtorem是一个移动端适配方案，可以自动在打包编译时将项目中的px属性转为rem，适配各种宽度尺寸的机型，其原理是在css预处理的阶段将px转换为rem，实现适配

App.vue

首先指定页面字体大小，这个大小决定了页面长度为多少rem

// 获取浏览器宽度

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

console.log(htmlWidth);

// 得到 html 的 DOM 元素

let htmlDom = document.getElementsByTagName("html")[0];

// 设置根元素字体大小

if (htmlWidth >= 450) {

htmlDom.style.fontSize = 22 + "px";

} else {

// 设置页面宽度整体为 20rem

htmlDom.style.fontSize = htmlWidth / 20 + "px";

}

// 定义 setRem 函数

function setRem() {

// 获取浏览器宽度

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

console.log(htmlWidth);

// 得到 html 的 DOM 元素

let htmlDom = document.getElementsByTagName("html")[0];

// 设置根元素字体大小

if (htmlWidth >= 450) {

htmlDom.style.fontSize = 22 + "px";

} else {

// 设置页面宽度整体为 20rem

htmlDom.style.fontSize = htmlWidth / 20 + "px";

}

}

setRem(); // 文档加载完成时设置 rem

// 改变窗口大小时重新设置 rem

window.onresize = function () {

setRem();

};

vite.config.ts

配置1rem对应的多少px，实际上使得设计稿上的像素大小等于写在css里的px

export default defineConfig({

 plugins: [vue()],

 css: {

  postcss: {

   plugins: [

    postCssPxToRem({

    // 设置转换比，设计稿宽度750rpx,页面宽度20rem，1rem==37.5px,就可以使1px等于设计稿的1rpx

     rootValue: 37.5, 

     propList: ["*"],

    }),

   ],

  },

 },

}