移动端的高清适配

为什么要适配?——越来越多的屏幕尺寸

怎么适配？

了解几个概念：
Retina屏幕 ：可以将把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。
dpr ： = 物理像素 / 设备独立像素【在某一方向上，x方向或者y方向】
普通屏幕下： 1个css像素 对应 1个物理像素(1:1)。
retina 屏幕下： 1个css像素对应 4个物理像素(1:4)

例：iPhone4 及后续产品
dpr=2：4, 4s, 5, 5s, 6, 6s
dpr=3：6+和6s+

适配大前提：

1、文字适配问题：
px：相对于显示器屏幕分辨率而言的相对长度单位
em：继承父级 20px -10px -5px
rem：相对html的值

确定根节点font-size的px值，即可确定目标节点的rem值

1、js控制

!(function (doc, win) {
		var docEl = doc.documentElement,
			resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		recalc = function () {
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
		};
		if (!doc.addEventListener) return;
		win.addEventListener(resizeEvt, recalc, false);
		doc.addEventListener('DOMContentLoaded', recalc, false);
	})(document, window);
 

查看更多关于移动端的高清适配的详细内容...