用rem实现响应式页面开发-CSDN博客

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。

html{
	font-size:20px;
}

.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;    
}

上面代码结果按钮大小如下图：

*看完rem原理，接下来我们看一个实例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>rem测试页面</title>

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

<link rel="stylesheet" href="../base/reset.css"/>

<link rel="stylesheet" href="girl.css" />

</head>

<script type="text/javascript">

new function (){

var _self = this;

_self.width = 640;//设置默认最大宽度

_self.fontSize = 100;//默认字体大小

_self.changePage = function(){

var p = (document.documentElement.getBoundingClientRect().width)/_self.width;

console.log(p);

document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+p*_self.fontSize+"px !important");

};

_self.changePage();

window.addEventListener("resize",function(){_self.changePage();},false);

};

</script>

<!--注释-->

<!--设置如上js代码，动态计算，给html、body设置font-size大小，-->

<!--在iPhone5上为50px；-->

<!--例如，用户头像宽高为25px；则设置为0.5rem，宽高就会随屏幕大小自适应-->

<body>

<div class="content">

<section class="head-wrapper">

<div class="head-img"></div>

<div class="head-name">小学妹</div>

<div class="head-task">

<div class="task-img"></div>

<div class="task-text">我的任务</div>

</div>

</section>

<section class="banner-wrapper">

<div class="banner-img"></div>

</section>

<section class="task-wrapper">

<div class="task-item">

<div class="task-head"></div>

<div class="task-name">Enson 完成了一个关于清华大学的任务</div>

</div><div class="task-item">

<div class="task-head"></div>

<div class="task-name">Enson 完成了一个关于清华大学的任务</div>

</div>

</section>

<section class="foot-wrapper">

<div class="foot-btn">求帮忙</div>

<div class="foot-btn">去帮忙</div>

</section>

</div>

</body>

</html>

以上是页面布局和js动态计算html font-size小心的代码，页面元素大小都用rem单位进行设置，当然有的元素宽度可以用百分比进行设置，大家可以参照demo进行学习。

2017-09-28 更新

*上面所写的方法中，根据手机屏幕的宽度用js动态给html赋值font-size的方法可以用 font-size:62.5%;和@media进行替代。能够达到同样的效果，同时也减少了代码量。如下：

@media only screen and (min-width: 320px) {
html{
font-size: 52.5%;
   }

}
@media only screen and (min-width: 375px) {
html{
font-size: 62.5%;
   }

}
@media only screen and (min-width: 414px) {
html{
font-size: 72.5%;
   }

}