uc,qq浏览器rem自适应布局问题的解决

您所在的位置：网站首页 › uc浏览器如何放大页面 › uc,qq浏览器rem自适应布局问题的解决

uc,qq浏览器rem自适应布局问题的解决

2024-07-05 10:59| 来源: 网络整理| 查看: 265

项目背景：公司的官网，各种分辨率适配，目前做的pc部分

遇到的问题今天遇到uc,qq，360急速等出现罢工问题（rem设置后尺寸偏大，导致网页放大了）谷歌，火狐，IE正常。我之前的的font-size是这样设置的：

我的设计稿是1920*1080,故设计 1rem= 12px;（鬼知道我为啥这样设计）

font-size: calc(6px + 6 * (100vw - 1000px) / 800 - 1px);

为此我还专门增加了这个函数为了那些奇怪的浏览器专门设置了动态更改根元素字体函数

export function response2Client() { // 移动端 rem 单位适配 console.log("ding") if (isMobileOrPc()) { // width * 100 / 750 = width / 7.5 // 1rem = 100px console.log('mobile') var width = window.screen.width; window.document.getElementsByTagName("html")[0].style.fontSize = width / 7.5 + "px"; }else{//检测那些浏览器并且改字体 if (!/Win64|Firefox|Trident/i.test(navigator.userAgent)) { const width = document.documentElement.scrollWidth | document.documentElement.clientWidth; const fontSize = (6 * (width - 1000)) / 800 + 5; console.log('-----'+fontSize+'--------') document.documentElement.style.fontSize = fontSize + "px"; } } }

把以上函数放在app.vue mounted里运行！起初是以为那些浏览器不支持vw的原因。后面才发现不是的，是这些浏览器当根标签html字体小于12px时，按照12px绘制，即我根元素即使改成10px,元素设置10rem,被算成12*10 =120px;

你只需要把根元素设置大一点就OK了，我放大了10倍；即1rem = 120px;

@media screen and(max-width: 1920px){ html{ font-size: calc(51px + 6 * (100vw - 1000px) / 80); } }

最后就把相应的使用rem的地方除以10，一切OK！

【本文地址】

uc,qq浏览器rem自适应布局问题的解决

uc,qq浏览器rem自适应布局问题的解决

今日新闻

推荐新闻