移动端h5适配方案
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<h2 data-id="heading-0">em + PostCSS插件</h2>
<blockquote>
<p>使用PostCSS插件将项目中的px单位自动转换为rem，搭配JS动态设置根字体大小（监听window.resize）。</p>
</blockquote>
<h3 data-id="heading-1">vite配置</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pxtorem from 'postcss-pxtorem'
// https://vite.dev/config/
export default defineConfig({
plugins: ,
css: {
postcss:{
plugins: [
pxtorem({
rootValue: 75,//根据设计稿进行配置，如果设计稿宽度为750则配置75
propList: ['*'],
unitPrecision: 5,
minPixelValue: 2,
exclude: /node_modules/i,
}),
],
}
},
})</pre>
</div>
<h3 data-id="heading-2">配合的js代码，监听视口变化改变根元素大小</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 处理各机型适配的fontsize
function handleRem() {
const baseSize = 75;// 与postcss配置中的rootValue保持一致
const scale = document.documentElement.clientWidth / 750;
document.documentElement.style.fontSize =
baseSize * Math.min(scale, 2) + 'px';
}
// 初始化设置根元素的值
handleRem()
// 监听窗口变化，根据窗口变化来改变根元素的值
window.addEventListener('resize', handleRem)</pre>
</div>
<h2 data-id="heading-3">Viewport单位</h2>
<blockquote>
<p>使用纯CSS的视口单位（vw, vh）进行布局，视口变化时元素尺寸自动缩放</p>
</blockquote>
<h3 data-id="heading-4">vite配置</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postcsspxtoviewport from 'postcss-px-to-viewport'
export default defineConfig({
plugins: ,
css: {
postcss: {
plugins: [
postcsspxtoviewport({
unitToConvert: 'px', // 要转换的单位
viewportWidth: 750, // 设计稿的视口宽度，一般是375
unitPrecision: 5, // 转换后的精度，即小数点位数
propList: ['*'], // 指定转换的CSS属性的单位，*代表全部css属性都转换
viewportUnit: 'vw', // 指定需要转换成的视口单位，建议使用vw
fontViewportUnit: 'vw', // 字体使用的视口单位
selectorBlackList: ['.ignore-'], // 指定不转换为视口单位的类名
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
replace: true, // 是否直接更换属性值，而不添加备用属性
exclude: , // 忽略某些文件夹下的文件或特定文件
})
]
}
}
})</pre>
</div>
<h2 data-id="heading-5">Flexible / Rem</h2>
<blockquote>
<p>淘宝旧方案，通过JS模拟viewport和rem，主要解决过去移动端高清屏的适配问题。没有具体实践过</p>
</blockquote>
<h2 data-id="heading-6">针对特殊情况进行处理</h2>
<p>以下两种方案均适配上面的Rem + PostCSS插件和Viewport单位 比如场景：滚动到遮住头部组件的位置，头部位置在设计稿上是150px，这种怎么实现</p>
<ol>
<li>方案1：就是通过offsetHeight，直接获取到针对于不同机型上真实的px值</li>
<li>方案2：使用方法进行转，直接传入设计稿上的高度就完事，会自动适配出对应px然后进行scrolltop的赋值即可</li>
</ol>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 根据设计稿上的px，计算出当前设备真实适配的 px 值
/**
* @param px 设计稿的px值
* @param isFormat 是否返回带px单位的字符串，默认true
* @param designWidth 设计稿的宽度，默认750px，根据实际情况修改
* @returns 适配后的px值
* */
export const pxValueToPx = (px: number, isFormat: boolean = true, designWidth: number = 750) => {
// 基准设计稿宽度（通常为 750px）
const _designWidth = designWidth;
// 获取当前设备的屏幕宽度
const windowWidth = document.documentElement.clientWidth;
// 计算缩放比例
const scale = windowWidth / _designWidth;
// 返回自适应后的 px 值
return isFormat ? `${px * scale}px` : px * scale;
}</pre>
</div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19180743
頁:
[1]