前端开发中 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: ["*"],
}),
],
},
},
}