The first step is to install postcss-pxtorem according to the rem provided by the vant official website: npm install postcss-pxtorem; the
second step is to install lib-flexible: npm i -S amfe-flexible, remember to introduce import 'amfe- in the main.js file flexible';
the third step is to configure postcss
in vue.config.js or vite.config.js
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 37.5, // 换算基数，1rem相当于37.5px,值为37.5时,淘宝插件里面为375/10 =37.5
// unitPrecision: 5, //允许REM单位增长到的十进制数字。
//propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
// propBlackList: [], //黑名单
exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
// selectorBlackList: [], //要忽略并保留为px的选择器
// ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
}),
]
}
}
}
}
HTML tags
Adding the above sentence in the web page can make the width of the web page automatically adapt to the width of the mobile phone screen.
in:
width: the width of the visible area, the value can be a number or the keyword device-width.
width=device-width : Indicates that the width is the width of the device screen
initial-scale=1.0: Indicates the initial zoom ratio
initial-scale: The zoom level of the visible area when the page is displayed for the first time. If the value is 1.0, the page will be displayed in actual size without any zoom.
maximum-scale=1.0, minimum-scale=1.0; The zoom level of the visible area
maximum-scale The program that users can enlarge the page, 1.0 will prohibit users from zooming in beyond the actual size.
user-scalable: Whether the page can be zoomed, no prohibits zooming
minimum-scale=0.5: Indicates the minimum zoom ratio
maximum-scale=2.0: Indicates the maximum zoom ratio
user-scalable=yes: Indicates whether the user can adjust the zoom ratio
If you want to open the webpage, it will be automatically displayed in the original ratio, and the user is not allowed to modify it, then:
Reference: https://blog.csdn.net/YanG_2859390447/article/details/121425221?spm=1001.2014.3001.5502