老师有问题

rem为什么是37.5 40不好吗，像素 /编程软件设置1px转为40 = 插件的值吗

源自：实战：美团外卖-首页实现 2-1 首页-头部结构

收起

2回答

好帮手慕星星 2020-08-22 11:53:05

同学你好，这段代码是为了解决1px像素的问题。例如dpr为2的时候，1px边框会占据两个像素。所以meta标签中的缩放会跟着dpr不同而计算改变

后面是根据视口设置html字体大小，视口设置了最大最小值，在这个范围内改变的时候字体大小也跟着改变

自己再理解下，祝学习愉快！

好帮手慕星星 2020-08-21 11:02:12

同学你好，37.5比较容易转换，例如视口宽度375px，那么就会转化为10rem，是一个整数。这里一般和html的字体大小保持一致

10rem 乘以37.5为375 。

祝学习愉快！

提问者早知今日何必当初 #1

老师那这段代码作用是什么 (function () { 'use strict'; // dpr->scale = 1 / dpr var docEl = document.documentElement, viewportEl = document.querySelector('meta[name="viewport"]'), dpr = window.devicePixelRatio || 1, maxWidth = 540, minWidth = 320; dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1); docEl.setAttribute('data-dpr', dpr); docEl.setAttribute('max-width', maxWidth); docEl.setAttribute('min-width', minWidth); var scale = 1 / dpr, content = 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'; if (viewportEl) { viewportEl.setAttribute('content', content); } else { viewportEl = document.createElement('meta'); viewportEl.setAttribute('name', 'viewport'); viewportEl.setAttribute('content', content); document.head.appendChild(viewportEl); } setRemUnit(); window.addEventListener('resize', setRemUnit); function setRemUnit() { var ratio = 30; var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth; // console.log(viewWidth); if (maxWidth && (viewWidth / dpr > maxWidth)) { viewWidth = maxWidth * dpr; } else if (minWidth && (viewWidth / dpr < minWidth)) { viewWidth = minWidth * dpr; } docEl.style.fontSize = viewWidth / ratio + 'px'; } })();

2020-08-22 10:49:08