rem.js

792 阅读1分钟

html的meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

在页面的顶部执行rem.js文件

简单的rem.js 

;(function(win, doc){  var     docEl = doc.documentElement,    resizeEvent = "orientationchange" in window ? "orientationchange" : "resize",    resizeHandle = function(){      var WIDTH = docEl.clientWidth;      var size = 200 * (WIDTH / 750);      docEl.style.fontSize = size + "px";    }
    window.addEventListener(resizeEvent, resizeHandle, false);    resizeHandle();}(window,document))


var size = 200 * (WIDTH / 750);

WIDTH  如果是iphone7则为375 则size为100

即在量出的实际设计图尺寸之后直接除以100 加上rem 就可以作为rem页面布局的尺寸

同时字体的12px 在此rem的计算中为0.12rem



在使用rem布局的时候,页面固定的图片标签与拿到数据重新渲染的同一个图片标签会出现视觉抖动的错位感受,同时图片标签设置了固定的宽和高。

解决方法:在img标签外部包一个div标签,设置div宽和高,设置img的宽和高为100%,就可以解决