rem的用法

rem的用法

吴阳 No Comment
手机端

原文地址:http://www.w3cfuns.com/blog-5471969-5407429.html

1、简单暴力的办法

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

以320宽度为基准,进行缩放,最大缩放为320*1.3 = 416,基本缩放到426都就可以兼容iphone6 plus的屏幕了,这个方法简单粗暴,又高效。

2、使用rem

<!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>
 html {
 height: 100%;
 width: 100%;
 font-family: 'Heiti SC', 'Microsoft YaHei';
 font-size: 5px;
 overflow: hidden;
 outline: 0;
 -webkit-text-size-adjust:none;
 }
 body {
 height: 100%;
 margin: 0;
 overflow: hidden;
 -webkit-user-select: none;
 position: relative;
 }
 header,
 footer {
 width: 100%;
 line-height: 1.5rem;
 font-size: 1rem;
 color: #000;
 border: 1px solid #ccc;
 text-align: center;
 background-color: #ccc;
 }
 .bd {
 margin-top: 1rem;
 margin-bottom: .5rem;
 margin-right: -.5rem;
 font-size: 0;
 }
 .box {
 width: 5rem;
 height: 5rem;
 display: inline-block;
 margin-right:.5rem;
 margin-bottom: .5rem;
 }
 .blue-box {
 background-color: #06c;
 }
 .org-box {
 background-color: #1fc195;
 }
 </style>
 
</head>
<body>
<header>我是头部</header>
 <div class="bd">
 <div class="box blue-box"></div>
 <div class="box org-box"></div>
 <div class="box blue-box"></div>
 <div class="box org-box"></div>
 <div class="box blue-box"></div>
 <div class="box org-box"></div>
 </div>
 <footer>我是页脚</footer>
 <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>

以上是原文作者根据不同分辨率设定根元素字体大小的JS,实现了,在不同分辨率下大小/布局等比例显示的效果。

关系:rem是以根元素作为参照。

比如

html{font-size:10px;}     1rem=10px;

html{font-size:20px;}    1rem=20px;

………..

所以只要根据不同设备设定不同根元素的字体大小,那么就可以适应不同的设备了。

那么怎么计算出不同分辨率下font-size的值?

1418903956

上面的表格蓝色一列是demo的尺寸,页面是以640的宽度去切的,怎么计算不同宽度下font-size的值,大家看表格上面的数值变化应该能明白。举个例子:384/640 = 0.6,384是640的0.6倍,所以384页面宽度下的font-size也等于它的0.6倍,这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推。

既然可以用JS实现,也可以用CSS实现。下面用到的是media。

html {
 font-size : 20px;
}
@media only screen and (min-width: 401px){
 html {
 font-size: 25px !important;
 }
}
@media only screen and (min-width: 428px){
 html {
 font-size: 26.75px !important;
 }
}
@media only screen and (min-width: 481px){
 html {
 font-size: 30px !important; 
 }
}
@media only screen and (min-width: 569px){
 html {
 font-size: 35px !important; 
 }
}
@media only screen and (min-width: 641px){
 html {
 font-size: 40px !important; 
 }
}

上面的做的设置当然是不能所有设备全适配,但是用JS是可以实现全适配。具体用哪个就要根据自己的实际工作场景去定了。

 

要发表评论,您必须先登录