05_一物理像素的实现

一物理像素的实现

rem+系统缩放

1.主体适配采用rem适配 并放大rem的基值(dpr倍)
2.再通过系统缩放 缩回dpr倍，initial-scale=1/dpr

(function(){
	var dpr  = window.devicePixelRatio||1;
	var styleNode = document.createElement("style");
	var w = document.documentElement.clientWidth*dpr/16;
	styleNode.innerHTML="html{font-size:"+w+"px!important}";
	document.head.appendChild(styleNode);
	var scale = 1/dpr;
	var meta = document.querySelector("meta[name='viewport']");
	meta.content="width=device-width,initial-scale="+scale;
})()

响应式+变换缩放

@media only screen and (-webkit-device-pixel-ratio:2 ) {
	#test{
		transform: scaleY(.5);
	}
}
@media only screen and (-webkit-device-pixel-ratio:3 ) {
	#test{
		transform: scaleY(.333333333333333333);
	}
}