em和rem及rem在移动的应用

时间：2023-02-06 06:19:55
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<style type="text/css">

    html{font-size:16px;}

    body{font-size:14px;}

    div{font-size:12px;}

    p{font-size:18px;width: 10em;}

</style>

</head>

<body>

   <div>

      <p>哈哈哈哈</p>

   </div>

</body>

</html>
本例中 p 的宽度是180px
解释：10*18=180px;
    em： 如果p本身有font-size，em就以它本身为基准
         如果p本身没有font-size，em就以有font-size样式最近的父类，即先找div有没有font-size,如果没有找body,还没有找html。
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<style type="text/css">

    html{font-size:16px;}

    body{font-size:14px;}

    div{font-size:12px;}

    p{font-size:18px;width: 10rem;}

</style>

</head>

<body>

   <div>

      <p>哈哈哈哈</p>

   </div>

</body>

</html>
本例中 p 的宽度是160px
解释：10*16=180px;
     rem:是以根元素为基准计算的

rem在移动端的运用

移动端设计稿常见宽度尺寸是640px和750px

运用rem实现移动端响应式布局，应该这么做：

首先在js中加入如下代码：

!function(n){var e=n.document,t=e.documentElement,i=720,d=i/100,o="orientationchange"in n?"orientationchange":"resize",a=function(){var n=t.clientWidth||320;n>720&&(n=720),t.style.fontSize=n/d+"px"};e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))}(window);

这段代码的作用是：在不同手机上显示页面的时候，根节点html的font-size不同，这样用rem为单位的dom元素的样式才会不一样，比如：width,margin之类的。

效果如下：

ipone4 320*480 显示结果

em和rem及rem在移动的应用

iphone6 375*627 显示结果

em和rem及rem在移动的应用

设计稿应该是基于iphone4或者iphone5来的，所以它的设计稿竖直放时的横向分辨率为640px，

为了计算方便，取一个100px的font-size为参照，那么body元素的宽度就可以设置为width: 6.4rem，

于是html的font-size=deviceWidth / 6.4。这个deviceWidth就是viewport设置中的那个deviceWidth。

根据这个计算规则，可得出本部分开始的四张截图中html的font-size大小如下：

deviceWidth = ，font-size =  / 6.4 = 50px

deviceWidth = ，font-size =  / 6.4 = .59375px

deviceWidth = ，font-size =  / 6.4 = .6875px

deviceWidth = ，font-size =  / 6.4 = .125px

设计稿750px同理:

deviceWidth = 320，font-size = 320 /7.5px

deviceWidth = 375，font-size = 375 / 7.5px

deviceWidth = 414，font-size = 414 /7.5px

deviceWidth = 500，font-size = 500 / 7.5px

设计稿的margin如果是20px就是20/100=0.2rem

所有设计稿上的width,height,margin,padding，都是除以100转换为rem

可以参看网易：http://3g.163.com/touch/all?version=v_standard

移动端不用rem的布局方式

这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述：

em和rem及rem在移动的应用

可以参看拉钩网：http://www.lagou.com/custom/list.html?utm_source=m_cf_cpt_baidu_pc&m=1

相关文章