CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem:大屏高宽自适应问题

2023-12-20 15:29:26

前言

继上篇《CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem》
发现一个有趣的问题,文件 rem.js 中按照宽度设置自适应,适用于大多数页面,但当遇到大屏就不那么合适了。

问题

使用宽度,注意代码第2 和 4 行:

    // 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16
    const screenWidth = 1920
    const scale = screenWidth / 16
    const 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 = 1080
    const scale = screenHeight / 16
    const htmlHeight = document.documentElement.clientHeight || document.body.clientHeight
        // 得到html的Dom元素
    const htmlDom = document.getElementsByTagName('html')[0]
        // 设置根元素字体大小
    htmlDom.style.fontSize = htmlHeight / scale + 'px'

在这里插入图片描述

总结

关键点就在最后的值 htmlDom.style.fontSize。它决定了rempx 的转换。需根据系统的设计来做相应处理。有时甲方需要在异屏(2880*1800)系统上展示,也可固定 htmlDom.style.fontSize 的值,如直接赋值为 16px

文章来源:https://blog.csdn.net/sinat_31213021/article/details/135103884
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。