河南住房和城乡建设厅网站资质,有免费的服务器吗,网址导航发布页,网页传奇版前言
继上篇《CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem》。 发现一个有趣的问题#xff0c;文件 rem.js 中按照宽度设置自适应#xff0c;适用于大多数页面#xff0c;但当遇到大屏就不那么合适了。
问题
使用宽度#xff0c;注意代码第2 和 4 行#xff1a;…前言
继上篇《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
