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%,就可以解决