本文主要是介绍CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem：大屏高宽自适应问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前言
继上篇《CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem》。
发现一个有趣的问题，文件 rem.js 中按照宽度设置自适应，适用于大多数页面，但当遇到大屏就不那么合适了。
问题
使用宽度，注意代码第2 和 4 行：
// 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16const screenWidth = 1920const scale = screenWidth / 16const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth// 得到html的Dom元素const htmlDom = document.getElementsByTagName('html')[0]// 设置根元素字体大小htmlDom.style.fontSize = htmlWidth / scale + 'px'
如下图，左右卡片的底部因内容较多而溢出。这是按照宽度设置的，html font-size 较大。
解决方案：注意差异也在代码第 2和 4 行，此时已改为按照高度计算：
// 按高度来const screenHeight = 1080const scale = screenHeight / 16const htmlHeight = document.documentElement.clientHeight || document.body.clientHeight// 得到html的Dom元素const htmlDom = document.getElementsByTagName('html')[0]// 设置根元素字体大小htmlDom.style.fontSize = htmlHeight / scale + 'px'
总结
关键点就在最后的值 htmlDom.style.fontSize。它决定了rem 与 px 的转换。需根据系统的设计来做相应处理。有时甲方需要在异屏（2880*1800）系统上展示，也可固定 htmlDom.style.fontSize 的值，如直接赋值为 16px；
这篇关于CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem：大屏高宽自适应问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
