原生JS实现h5页面rem适配

最新推荐文章于 2022-06-05 19:36:02 发布

原创最新推荐文章于 2022-06-05 19:36:02 发布 · 732 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css

这段代码用于在JavaScript中动态设置页面字体大小，以实现基于设备宽度的响应式设计。当设备宽度大于750px时，字体大小会按照750px的标准进行缩放，确保在不同分辨率的设备上都能保持良好的视觉效果。

下面这段代码适用于原生js也的页面, css使用rem做为单位就ok了!

var deviceWidth = document.documentElement.clientWidth;

if (deviceWidth > 750) deviceWidth = 750;

document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';

window.onresize = function() {

    var deviceWidth = document.documentElement.clientWidth;

    if (deviceWidth > 750) deviceWidth = 750;

    document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
}