rem一句话说明白+亲测实例

最新推荐文章于 2022-02-25 00:27:44 发布

weixin_34342207

最新推荐文章于 2022-02-25 00:27:44 发布

阅读量149

点赞数

文章标签： python matlab

原文链接：https://my.oschina.net/u/583531/blog/858517

版权

2019独角兽企业重金招聘Python工程师标准>>>

rem的好处

rem 是相对于 html 元素的 font-size 的一个单位。如果 html 上定义了 font-size: 20px;，则无论在任何地方都是 1rem = 20px 这个大小不会受到父元素的影响。

我们统一使用rem对页面进行整体缩放。强烈建议大家对需要适应页面大小的任何元素都使用 rem 为单位来定义。

你也许会问？

也许，你会说，移动端宽度我都是用的百分比%也可以自适应呢？那我问你，高度的自适应怎么办？因为影响一个元素的大小，不仅是宽，还有高。

还有，更多终端的比例适配rem更好。你的界面会在N种长宽的手机上展示，更有可能跨到pad上。

举个栗子：

如果你设置一个头部bar，比如，宽度100%，高度40px这种固定高度。在手机上40px，那么pad上也将显示100%宽度，高40px。这时，你会发现---》40px高度的bar，在手机上ok，在pad上则太窄了。

rem工作原理

1，媒体查询判断屏幕宽度-----》2，设置html根值-----》3，其他元素因为单位都是rem，依赖与根值，--------》4，比例放大或缩小。

rem实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<title>rem用法和水平2个按钮平均布局</title>

		<style>
			*{ margin: 0px; padding: 0px;}
			html{ font-size: 20px;}  /*初始值给html根一个值*/
			
			 /*以下利用媒体查询来判断,不同屏幕的html的根的值*/
			@media only screen and (min-width: 400px) {
			  html {
			    font-size: 21.33333333px !important;
			  }
			}
			@media only screen and (min-width: 414px) {
			  html {
			    font-size: 22.08px !important;
			  }
			}
			@media only screen and (min-width: 480px) {
			  html {
			    font-size: 25.6px !important;
			  }
			}
			
			body{ padding: 0.75rem;}
			
			/*按钮*/
			.row-btn{ margin-left: -2%;}
			.row-btn .btn-50{ float: left; margin-left: 2%; width: 48%;  font-size: 0.7rem; line-height: 2.2rem;  text-align:center; background: #00A5E0; color: #fff; font-family: "微软雅黑";}
 
		</style>
		
		
	</head>
	<body>
		<div class="row-btn">
			<div class="btn-50">确定</div>
			<div class="btn-50">取消</div>
		</div>
	</body>
</html>