根据dpr设置html fontsize,如何为不同移动设备设置html不同的font-size?

本文介绍了一种兼容性良好的REM布局方案,该方案通过JavaScript动态调整根元素字体大小实现响应式布局,确保了在不同设备上的显示效果一致。特别针对低版本安卓设备进行了优化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

iPhone6的屏幕下1rem=50px

或者用css

html{font-size:calc(100vw / 7.5);}

分割线

抱歉,之前的那段js代码兼容性不是很好,包括那段css代码,只要在低版本的安卓手机上就会失效,找了很久找到一段代码分享一下,兼容性杠杠的

(function(){

var originWidthByDesign = 750 / 2;

var originRootFontSize = 50;

var maxLimitWidth = 667;

var doc = document.documentElement;

var div = document.createElement('div');

div.setAttribute('style', 'font-size: 1rem');

if (!!document.addEventListener && '1rem' === div.style.fontSize) {

var reCalculate = function reCalculate() {

var clientWidth = doc.clientWidth;

if (!clientWidth) {

return;

}

clientWidth = clientWidth < maxLimitWidth ? clientWidth : maxLimitWidth;

doc.style.fontSize = originRootFontSize * clientWidth / originWidthByDesign + 'px';

doc.style.display = 'none';

doc.clientWidth;

doc.style.display = '';

};

window.addEventListener('resize', reCalculate, false);

document.addEventListener('DOMContentLoaded', reCalculate, false);

reCalculate();

}

function getQueryString (name) {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

var r = window.location.search.substr(1).match(reg);

if (r != null) return unescape(r[2]); return null;

}

})()

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值