rem布局

最新推荐文章于 2022-11-05 18:41:48 发布

Sallery

最新推荐文章于 2022-11-05 18:41:48 发布

阅读量278

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Sallery/article/details/107213005

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

px ：像素单位

em ：相对单位，相对于父元素的大小，父元素是11px，子元素2em就是22px

rem：相对单位，相对于根元素html的字体大小单位，根元素html默认是16px，任何一个元素的2rem就是32px，可以设定于任何长度单位。

(meate-viewport)

vw：v-viewport 视窗的宽度,百分比单位，百分之百宽度100vw

vh： v -viewport 视窗的高度。百分比单位，百分之百高度100vw

设定最大宽度，设定最小宽度，不能超过最大，超过的部分不显示，小于最小的话下面有滑动栏

max-width: 1000px;

min-width: 600px;

max-height: 1200px;

min-height: 300px;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			#d1{
				width: 5rem;
				height: 5rem;
				background-color: #00FFFF;
			}
			#d2{
				font-size: 1rem;
			}
		</style>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div id="d1">
			<div id="d2">
				hello
			</div>
		</div>
		<!-- 1.假设设定网站的设计稿750px;
			 1.每个人打开网页的时候，因为设备不同，浏览器的设定分辨率不同，需要在不同的分辨率下打开
			 2.假设屏幕大小1000px，1rem =100px,10rem刚好占满整个屏幕
			 3.假设屏幕大小500px, 1rem =50px,10rem刚好占满整个屏幕
			
				  -->
		<script type="text/javascript">
			
			function aa(){
			var screenWidth = window.innerWidth;//拿到屏幕的宽度
			var dwdx = screenWidth/7.5;       //屏幕的宽度/设计稿占满全屏的宽度为多少rem
			var html = document.querySelector("html");
			html.style.fontSize = dwdx+"px";
			}
			aa()
			window.onresize = function(){
				aa()
			}
		</script>
	</body>
	
	
</html>

Sallery

关注

0
点赞
踩
0

收藏

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

px ：像素单位em ：相对单位，相对于父元素的大小，父元素是11px，子元素2em就是22pxrem：相对单位，相对于根元素html的字体大小单位，根元素html默认是16px，任何一个元素的2rem就是32px，可以设定于任何长度单位。(meate-viewport)vw：v-viewport 视窗的宽度,百分比单位，百分之百宽度100vwvh： v -viewport 视窗的高度。百分比单位，百分之百高度100vw设定最大宽度，设定最小宽度，不能超...
复制链接

扫一扫

专栏目录