rem使用（初级篇）

rem的使用

定义：rem的大小有根元素html中的font-size决定，例如html{font-size:20px;},那么1rem=20px或者1px=1/20rem;

使用：实现不同屏幕尺寸等比例缩放方法一般有俩种，第一种：根据“媒体查询”法，设置不同屏幕大小的html字号；第二种：使用js判断屏幕大小实现html取值。

 

例子1：根据媒体查询设置不同屏幕尺寸

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;" />

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">

<style>
*{
    margin:0px;
    padding:0px;
}
html {
font-size:20px;
    }

　@media only screen and (min-width:360px) {
  html {
  font-size:22.5px; /*android 5.5*/
  }
  }

@media only screen and (min-width:375px) {
html {
font-size:23.4375px;
}
}
@media only screen and (min-width:414px) {
html {
font-size:25.875px;
}
}
@media only screen and (min-width:641px) {
html {
font-size:40px;
}
body {
max-width:640px;
}
}body {
font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;
background-color:#fff;
min-width:320px;
margin:0 auto;
}
header{width:16rem;height:1rem;background:red;font-size:0.6rem;margin:0 auto;}
section{color:blue;width:15.5rem;display:block;background:yellow;font-size:0.6rem;padding:0.25rem 0.25rem;text-indent:2em; line-height:0.9rem;margin:0 auto;}
footer{width:16rem;height:1rem;background:red;font-size:0.6rem;margin:0 auto;}
</style>
</head>

<body>
<header>标题</header>
<section>
上面的表格蓝色一列是Demo3中页面的尺寸，页面是以640的宽度去切的，怎么计算不同宽度下font-site的值，大家看表格上面的数值变化应该能明白。举个例子：384/640 = 0.6，384是640的0.6倍，所以384页面宽度下的font-size也等于它的0.6倍，这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推。
</section>
<footer>
底部
</footer>
</body>
</html>

要注意的是：元素的大小设置要根据参考屏幕尺寸，上例是根据设计页面(320px)去写，width（header）=320px(屏幕宽度)/20px(相应的html设置的根字号)=16rem;如果设计页面是640px,那么width（header）=640px(屏幕宽度)/40px(相应的html设置的根字号)=16rem;其他屏幕尺寸类推。

 

例子2：使用js对屏幕判断实现法

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<title>rem phone test</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
*{
    margin:0 auto;
}
html {
height: 100%;
width: 100%;
font-family: 'Heiti SC', 'Microsoft YaHei';
font-size: 20px;
overflow: hidden;
outline: 0;
-webkit-text-size-adjust:none;
}
body {
height: 100%;
margin: 0 auto;
overflow: hidden;
-webkit-user-select: none;
position: relative;

box-shadow:0px 0px 1px red;
}
header{
    width:16rem;
    height:2.5rem;
    margin:0 auto;
}
header img{
    max-width:100%;
    width:100%;
}
nav{
    width:16rem;
    height:2.5rem;
    margin:0 auto;
}
nav a{
    display:block;
    height:1rem;
    width:3.975rem;
    float:left;
    background:blue;
    font-size:.45rem;
    line-height:1rem;
    text-align:center;
    color:#fff;
    margin-right:0.025rem;
    margin-bottom:1px;
}
nav a:nth-of-type(4n){
    margin-right:0rem;
}
</style>
</head>

<body>
<header>
    <img src="header.jpg" />
</header>
<nav>
    <a> 首页</a>
    <a> 首页</a>
    <a> 首页</a>
    <a> 首页</a>
    <a> 首页</a>
    <a> 首页</a>
    <a> 首页</a>
    <a> 首页</a>
</nav>
<!--加入js可以实现所有尺寸页面完美显示效果-->
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
  var clientWidth = docEl.clientWidth;
  if (!clientWidth) return;
  docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</body>
</html>

 

例2同样注意的是根据不同设计页面去计算元素的宽度(数据)，上例同样是根据320px的屏幕去计算，那么不同屏幕 计算font-size=20*(clientWidth/320);

补充：以上例子都是以320px的宽度为基准！上面解释如意解释不到或欠缺的问题联系qq:1286731073(本人)，欢迎各位同道探讨交流！！

 

posted on 2015-10-20 11:37  源人  阅读(1356)  评论(0)    收藏  举报

导航