您的位置：首页 > 其它

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

2017-03-14 00:00 274 查看
摘要: rem

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>


rem具体应用（对上面栗子的补充，以上例为准）

比如你的设计稿bar高度是：15px，那么用15除以20，= 0.75rem;
如果你的设计稿bar高度是：40px，那么就用 40除以20，= 2rem；
如果你的设计稿 banner高度是：300px，那么300除以20，则是15rem

这里的分母20，就是页面中，html的根值。

根值根据实际客户端的屏幕大小做了媒体查询，然后动态改变根值，从而实现了具体屏幕大小，改变页面的整体比例。

页面元素的大小依赖-------》根值----》依赖媒体查询后给的值
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  单位 rem
相关文章推荐
新的分享
章节导航