移动端开发rem设置

最新推荐文章于 2023-06-21 17:59:20 发布

凌辰 ℡

最新推荐文章于 2023-06-21 17:59:20 发布

阅读量135

点赞数

分类专栏：移动端开发文章标签： javascript html5 css

本文链接：https://blog.csdn.net/weixin_43117777/article/details/111463442

版权

移动端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

(function(){
	"use strict";
	var docEl = document.documentElement,
	viewporEl=document.querySelector('meta[name="viewport"]'),	
	dpr=window.devicePixelRatio || 1,	
	maxWidth=640,
	minWidth=320,
	
	dpr= dpr >= 3 ? 3:(dpr >= 2 ? 2 : 1); 
	
	docEl.setAttribute('data-dpr',dpr);	
	docEl.setAttribute('max-width',maxWidth);	
	docEl.setAttribute('min-width',minWidth);
	
	var scale=1/dpr,	
	content="width=device-width,initial-scale="+scale+",maximum-scale="+scale+",minimum-scale="+scale+",user-scalable=no";
	if(viewporEl){
		viewporEl.setAttribute('content',content);
	}else{
		viewporEl=document.createElement('meta');
		viewporEl.setAttribute("name",'viewport');
		viewporEl.setAttribute('content',content);
		document.head.appendChild(viewporEl);
	}
	
	setRemUnit();
	window.addEventListener('resize', setRemUnit);
	
	function setRemUnit() {
		var ratio = 18.75;
		var viewWidth = docEl.getBoundingClientRect().width ||
			window.innerWidth;
		
		if(maxWidth && (viewWidth / dpr >maxWidth)){
			viewWidth = maxWidth * dpr;
		}else if(minWidth && (viewWidth/dpr < minWidth)){
			viewWidth= minWidth * dpr;
			console.log(viewWidth)
		}
		
		docEl.style.fontSize = viewWidth / ratio + 'px';
	}
}())