05_一物理像素的实现

最新推荐文章于 2022-03-08 18:42:32 发布

浅色流年

最新推荐文章于 2022-03-08 18:42:32 发布

阅读量585

点赞数

分类专栏：移动端

本文链接：https://blog.csdn.net/zljcxdm/article/details/83014742

版权

移动端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一物理像素的实现

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);
	}
}