什么是 rem
这个单位代表根元素的 font-size 大小 (例如 元素的 font-size). 当用在根元素的 font-size 上面时 , 它代表了它的初始值 (译者注: 默认的初始值是 html 的默认的 font-size 大小, 比如当未在根元素上面设置 font-size 大小的时候, 此时的 1rem==1em, 当设置 font-size=2rem 的时候, 就使得页面中 1rem 的大小相当于 html 的根字体默认大小的 2 倍, 当然此时页面中字体的大小也是 html 的根字体默认大小的 2 倍).
注 此处的 font-size 大小为 html 元素的最终大小而非设置大小
mdn length 概述
兼容问题描述
代码如下
- function refreshRem() {
- var width = docEl.getBoundingClientRect().width;
- if (width / dpr> 540) {
- width = 540 * dpr;
- }
- var rem = width / 10;
- docEl.style.fontSize = rem + 'px';
- flexible.rem = win.rem = rem;
- }
docEl.style.fontSize = rem + 'px'; 将根元素 htmlfont-size 大小设置为屏幕 10 分之一大小的绝对宽, 如设备宽 750px 那么 htmlfont-size` 为 75px.
但实际上在不同浏览器上字体大小不一定显示为 75px,
计算使用到方法
Window.getComputedStyle() 方法返回一个对象, 该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有 CSS 属性的值. 私有的 CSS 属性值可以通过对象提供的 API 或通过简单地使用 CSS 属性名称进行索引来访问.
此 CSSStyleDeclaration.getPropertyValue() 接口会返回一个 DOMString , 这个返回值将会包含预请求的 CSS 属性信息.
计算方式如下
window.getComputedStyle(docEl).getPropertyValue('font-size')
此方法计算得到 html 最终的 font-size 大小
正常情况下返回的和我们设置的 font-size 大小一致, 但是在某些浏览器上会显示不一致导致我们页面在此类设备上存在布局的差异
解决方法
计算公式
你当前设置的 fontSize / 实际计算的 fontSize = 你需要设置的 fontSize / 你当前设置的 fontSize
根据这个计算公式重新设置 fontSize 的大小
- var root = window.document.documentElement;
- var fontSize = parseFloat(root.style.fontSize);
- var finalFontSize = parseFloat(window.getComputedStyle(root).getPropertyValue("font-size"));
- if(finalFontSize !== fontSize) {
- root.style.fontSize = fontSize * fontSize / finalFontSize + "px";
- }
完整代码
注: 本项目中代码基于源码有修改
- ;(function(win, lib) {
- var doc = win.document;
- var docEl = doc.documentElement;
- var metaEl = doc.querySelector('meta[name="viewport"]');
- var flexibleEl = doc.querySelector('meta[name="flexible"]');
- var dpr = 0;
- var scale = 0;
- var tid;
- var flexible = lib.flexible || (lib.flexible = {});
- var fontSizeCoefficient = 1;
- if (metaEl) {
- console.warn('将根据已有的 meta 标签来设置缩放比例');
- var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
- if (match) {
- scale = parseFloat(match[1]);
- dpr = parseInt(1 / scale);
- }
- } else if (flexibleEl) {
- var content = flexibleEl.getAttribute('content');
- if (content) {
- var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
- var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
- if (initialDpr) {
- dpr = parseFloat(initialDpr[1]);
- scale = parseFloat((1 / dpr).toFixed(2));
- }
- if (maximumDpr) {
- dpr = parseFloat(maximumDpr[1]);
- scale = parseFloat((1 / dpr).toFixed(2));
- }
- }
- }
- if (!dpr && !scale) {
- var isAndroid = win.navigator.appVersion.match(/android/gi);
- var isIPhone = win.navigator.appVersion.match(/iphone/gi);
- var devicePixelRatio = win.devicePixelRatio;
- if (isIPhone) {
- // iOS 下, 对于 2 和 3 的屏, 用 2 倍的方案, 其余的用 1 倍方案
- if (devicePixelRatio>= 3 && (!dpr || dpr>= 3)) {
- dpr = 2;
- } else if (devicePixelRatio>= 2 && (!dpr || dpr>= 2)){
- dpr = 2;
- } else {
- dpr = 1;
- }
- } else {
- // 其他设备下, 仍旧使用 1 倍的方案
- dpr = 1;
- }
- scale = 1 / dpr;
- }
- docEl.setAttribute('data-dpr', dpr);
- if (!metaEl) {
- metaEl = doc.createElement('meta');
- metaEl.setAttribute('name', 'viewport');
- metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
- if (docEl.firstElementChild) {
- docEl.firstElementChild.appendChild(metaEl);
- } else {
- var wrap = doc.createElement('div');
- wrap.appendChild(metaEl);
- doc.write(wrap.innerHTML);
- }
- }
- function refreshRem(){
- var width = docEl.getBoundingClientRect().width;
- if (width / dpr> 540) {
- width = 540 * dpr;
- }
- var rem = width / 10;
- docEl.style.fontSize = rem * fontSizeCoefficient + "px";
- var finalFontSize = parseFloat(window
- .getComputedStyle(docEl)
- .getPropertyValue("font-size"));
- let tempCoefficient = rem / finalFontSize;
- if (fontSizeCoefficient !== tempCoefficient) {
- fontSizeCoefficient = tempCoefficient;
- docEl.style.fontSize = rem * fontSizeCoefficient + "px";
- }
- flexible.rem = win.rem = rem;
- }
- win.addEventListener('resize', function() {
- clearTimeout(tid);
- tid = setTimeout(refreshRem, 300);
- }, false);
- win.addEventListener('pageshow', function(e) {
- if (e.persisted) {
- clearTimeout(tid);
- tid = setTimeout(refreshRem, 300);
- }
- }, false);
- refreshRem();
- // setTimeout(refreshRem, 800);
- flexible.dpr = win.dpr = dpr;
- flexible.refreshRem = refreshRem;
- flexible.rem2px = function(d) {
- var val = parseFloat(d) * this.rem;
- if (typeof d === 'string' && d.match(/rem$/)) {
- val += 'px';
- }
- return val;
- }
- flexible.px2rem = function(d) {
- var val = parseFloat(d) / this.rem;
- if (typeof d === 'string' && d.match(/px$/)) {
- val += 'rem';
- }
- return val;
- }
- })(window, window['lib'] || (window['lib'] = {}));
其他资料
这个文章中计算公式 是 docElementFontSize+(docElementFontSize - finalDocElementFontSize) 不知道作者是如何得出的, 但是我发现这个方法在我们存在有问题的的手机上测试并不可行
来源: https://www.cnblogs.com/net-xiejun/p/9651246.html