当前位置：首页 > news >正文

页面适配，高度撑满

news 2026/6/18 4:58:03

有的页面是整屏显示的，需要高度撑满来适配，一般设计稿的尺寸是360*800

* 适配规则：

- 横屏时（宽度 > 高度），按高度撑满适配：1rem = 屏幕高度 / 100

- 竖屏时：

- 当屏幕高度 >= 800px 时，按高度撑满适配：1rem = 屏幕高度 / 100

- 当屏幕高度 < 800px 时，按宽度撑满适配：1rem = 屏幕宽度 / 45（宽度360px对应45rem）

1、安装postcss-pxtorem插件

2、screenAdapter.js

/*** 屏幕高度适配工具* 设计稿基准：360px * 800px* 根据屏幕高度动态设置rem基准值，使页面内容随高度缩放* * 原理：设计稿800px对应100rem，所以1rem = 屏幕高度 / 100*//*** 设置根元素字体大小（rem基准值）* 1rem = (屏幕高度 / 设计稿高度) * 8px* 这样设计稿中的800px对应100rem，360px对应45rem* * 适配规则：* - 横屏时（宽度 > 高度），按高度适配：1rem = 屏幕高度 / 100* - 竖屏时：*   - 当屏幕高度 >= 800px 时，按高度适配：1rem = 屏幕高度 / 100*   - 当屏幕高度 < 800px 时，按宽度适配：1rem = 屏幕宽度 / 45（宽度360px对应45rem）*/
function setRootFontSize() {const screenHeight = window.innerHeight || document.documentElement.clientHeightconst screenWidth = window.innerWidth || document.documentElement.clientWidthlet baseFontSize// 判断是否为横屏const isLandscape = screenWidth > screenHeight// 横屏时，按高度适配if (isLandscape) {// 设计稿800px对应100rem，所以1rem = 屏幕高度 / 100baseFontSize = screenHeight / 100} else {// 竖屏时，高度小于800时，按照宽度撑满360去适配if (screenHeight < 800) {// 设计稿宽度360px对应45rem，所以1rem = 屏幕宽度 / 45baseFontSize = screenWidth / 45} else {// 高度 >= 800px 时，按高度适配// 设计稿800px对应100rem，所以1rem = 屏幕高度 / 100baseFontSize = screenHeight / 100}}// 设置根元素字体大小document.documentElement.style.fontSize = `${baseFontSize}px`
}/*** 防抖函数*/
function debounce(func, wait) {let timeoutreturn function executedFunction(...args) {const later = () => {clearTimeout(timeout)func(...args)}clearTimeout(timeout)timeout = setTimeout(later, wait)}
}/*** 使用requestAnimationFrame优化的resize处理*/
let rafId = null
let lastHeight = window.innerHeightfunction handleResize() {if (rafId) {cancelAnimationFrame(rafId)}rafId = requestAnimationFrame(() => {const currentHeight = window.innerHeight || document.documentElement.clientHeightconst currentWidth = window.innerWidth || document.documentElement.clientWidthconst isLandscape = currentWidth > currentHeight// 横屏时，宽度和高度变化都需要更新；竖屏时，高度小于800时宽度变化也需要更新；高度>=800时，只在高度变化时更新const needUpdate = isLandscape ? true // 横屏时，宽度和高度变化都需要更新: currentHeight < 800 ? true // 竖屏且高度小于800时，宽度变化也需要更新: Math.abs(currentHeight - lastHeight) > 1 // 竖屏且高度>=800时，只在高度变化时更新if (needUpdate) {lastHeight = currentHeightsetRootFontSize()}rafId = null})
}/*** 初始化适配*/
function initScreenAdapter() {// 初始设置
  setRootFontSize()// 监听窗口大小变化（使用防抖优化）const debouncedResize = debounce(handleResize, 100)window.addEventListener('resize', debouncedResize)// 监听屏幕方向变化window.addEventListener('orientationchange', () => {// 延迟执行，等待屏幕方向变化完成setTimeout(() => {setRootFontSize()}, 100)})// 监听页面可见性变化（处理浏览器窗口切换）document.addEventListener('visibilitychange', () => {if (!document.hidden) {setTimeout(() => {setRootFontSize()}, 100)}})
}export default initScreenAdapter

3、在main.js中引入：

// 引入屏幕适配工具
import initScreenAdapter from '@/utils/screenAdapter'
// 初始化屏幕适配
initScreenAdapter()

4、postcss.config.js

module.exports = {plugins: {'postcss-pxtorem': {rootValue: 8, // 设计稿800px对应100rem，所以1rem=8pxunitPrecision: 3, // 保留3位小数propList: ['*'], // 所有属性都转换selectorBlackList: [], // 不排除任何选择器replace: true, // 替换而不是添加mediaQuery: false, // 不转换媒体查询中的pxminPixelValue: 1, // 最小转换值，小于1px的不转换exclude: /node_modules/i // 排除node_modules中的文件
    }}
}