兼容性问题---H5屏幕适配方案
绝世唐门三哥 2024-10-15 17:03:02 阅读 97
对前端计量单位的理解：px、vw、rem、em、%等；
https://www.tiangong.cn/chatShare?share_id=e3a157fe37e041de95a2
<code>前端开发中常见的计量单位主要包括以下几种：
px (像素): 屏幕显示的最小单位，一个像素表示显示器上一个点的颜色。
% (百分比): 通常相对于父元素的宽度或高度，例如 width: 50% 意味着元素的宽度是父元素宽度的一半。
em: 相对于当前元素的字体尺寸，例如 font-size: 2em 表示元素的字体大小是当前字体尺寸的2倍。
rem: 相对于根元素（通常是 <html> 元素）的字体尺寸，例如 font-size: 2rem 表示元素的字体大小是根元素字体尺寸的2倍。
vw (视口宽度): 相对于视口宽度的百分比，1vw 等于视口宽度的1%。
vh (视口高度): 相对于视口高度的百分比，1vh 等于视口高度的1%。
cm, mm, in (厘米、毫米、英寸): 这些是绝对长度单位，用于打印等领域。
pt (点): 1pt 等于 1/72 英寸，常用于印刷行业。
pc (派卡): 1pc 等于 12pt，也常用于印刷行业。
这些计量单位可以用来设置元素的宽度、高度、字体大小、边距、内边距等各种样式属性。使用合适的计量单位可以提高网页的响应性和灵活性，并确保在不同设备和屏幕尺寸上都有良好的显示效果。
一、动态rem适配方案：适合H5项目的适配方案
实现方式为：动态设置页面根元素大小，同时配合postcss-pxtorem插件pxtorem自动转换插件；
第一步：动态设置页面根元素大小
第一种：使用媒体对象@media根据屏幕的宽度设置不同的根元素大小
/* 基础样式 */
html {
font-size: 16px; /* 默认字体大小 */
}
/* 小屏设备（手机）样式 */
@media screen and (max-width: 600px) {
html {
font-size: 14px; /* 小屏设备字体大小 */
}
}
/* 中等屏幕（平板）样式 */
@media screen and (min-width: 601px) and (max-width: 1024px) {
html {
font-size: 16px; /* 中等屏幕字体大小 */
}
}
/* 大屏设备（桌面）样式 */
@media screen and (min-width: 1025px) {
html {
font-size: 18px; /* 大屏设备字体大小 */
}
}
第二种：使用js动态设置根元素大小
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=750){
docEl.style.fontSize = '16px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
recalc()
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
第三种：使用插件lib-flexible.js动态调整根元素大小（推荐）
第二步：配合px自动转rem的插件：postcss-pxtorem
1. 安装
npm install postcss-pxtorem --save-dev
2. 文件配置
// 在项目根目录创建或编辑 postcss.config.js 文件，添加 postcss-pxtorem 插件配置
/* postcss.config.cjs */
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 基准值，对应于根元素的 font-size
unitPrecision: 5, // 保留小数点位数
propList: ['*', '!min-width', '!max-width'], // 排除 min-width 和 max-width 属性
selectorBlackList: [], // 忽略的选择器
replace: true, // 替换而不是添加备用属性
mediaQuery: false, // 允许在媒体查询中转换 px
minPixelValue: 0 // 最小的转换数值
}
}
};
/* vite */
export default defineConfig({
css: {
postcss: './postcss.config.cjs',
}
})
二、使用vw、vh视口单位适配H5页面
使用插件postcss-px-to-viewport实现：
1.安装
npm install postcss-px-to-viewport --save-dev
2. 使用
// 需要在项目的 postcss.config.js 文件中配置这个插件
// 示例代码：
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 375, // 视口的宽度，对应的是设计稿的宽度
unitToConvert: 'px', // 需要转换的单位
viewportUnit: 'vw', // 转换后的单位
selectorBlackList: ['ignore'], // 不转换的选择器
minPixelValue: 1, // 小于1px的不转换
mediaQuery: false // 是否允许在媒体查询中转换
}
}
}
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。