javascript学习-rem布局

最新推荐文章于 2023-08-21 14:59:23 发布

加油吧qaq

最新推荐文章于 2023-08-21 14:59:23 发布

阅读量223

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43368682/article/details/107571361

版权

rem布局

REM r root, em 相对单位，相对于html的字体大小单位，可以用于任何设定长度的单位。

根据设计稿来设定1rem等于多少px，后面根据页面宽度和设计稿宽度比例来缩放1rem的单位。从而实现页面在不同浏览器中的兼容性。
例子：
js辅助响应式：

 /*
	    1、设计师设计网站的设计稿：1000px
		2、每个人打开网页时候，因为设备不同，或者浏览器设定的分辨率不同，
		使得需要在不同的分辨率下打开 
		3、屏幕大小：1000px,1rem=100px(设计稿的宽度),10rem占满整个屏幕的宽度
		4、屏幕大小：500px,10rem也需要刚好占据整个屏幕的宽度，此时1rem=50px
		*/
		(function(){
function xys(){
			var userAgent=navigator.userAgent
			var html=document.querySelector("html");
			//userAgent.indexOf("iPhone")通过此方法可以获取iPhone在字符串中的索引值(开头位置)
			//没有找到返回-1
			html.className="";
			if((userAgent.indexOf("iPhone"))!=-1){
			    	html.classList.add("iphone");
			}else if((userAgent.indexOf("Android"))!=-1)
			{
				html.classList.add("android");
			}else if((userAgent.indexOf("iPad"))!=-1){
				html.classList.add("ipad");
			}else{
				html.classList.add("pc");
			}
			if(window.innerWidth<640){
				html.classList.add('lt640');
				html.classList.add('lt960');
				html.classList.add('lt1200');
			}else if(window.innerWidth<960){
				html.classList.add('lt960');
				html.classList.add('lt1200');
				html.classList.add('gt640');
			}else if(window.innerWidth<1200){
			html.classList.add('lt1200');
			html.classList.add('gt640');
			html.classList.add('gt960');
			}else{
				html.classList.add('gt640');
				html.classList.add('gt960');
				html.classList.add('gt1200');
				
			}
			
			var screenWidth=window.innerWidth;
			var danwei=screenWidth/10;//屏幕的宽度/设计稿占满全屏的宽度为多少rem
			var html=document.querySelector("html")
			html.style.fontSize=danwei+"px";
			}
			xys();
			window.onresize=function(){
				xys();
			}

})()

index.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			#d1{
				width:5rem;
				height: 5rem;
				background: #7FFFD4;
			}
			
			
		</style>
		<script type="text/javascript" src="js/js辅助式响应.js"></script>
	</head>
	<body>
		<div id="d1">
			
		</div>
	</body>
</html>

效果：在各个不同型号机型的页面中，div始终占据屏幕的一半：
在这里插入图片描述

在这里插入图片描述

加油吧qaq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript学习-rem布局

rem布局REM r root, em 相对单位，相对于html的字体大小单位，可以用于任何设定长度的单位。根据设计稿来设定1rem等于多少px，后面根据页面宽度和设计稿宽度比例来缩放1rem的单位。从而实现页面在不同浏览器中的兼容性。例子：js辅助响应式： /* 1、设计师设计网站的设计稿：1000px 2、每个人打开网页时候，因为设备不同，或者浏览器设定的分辨率不同，使得需要在不同的分辨率下打开 3、屏幕大小：1000px,1rem=100px(设计稿的宽度),10r
复制链接

扫一扫