<!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 显示结果

iphone6 375*627 显示结果

设计稿应该是基于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,记住一个开发原则就好:文字流式,控件弹性,图片等比缩放。以图描述:

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

em和rem及rem在移动的应用的更多相关文章

  1. 理解em,rem以及rem的失效问题

    在平常做网站写代码的时候一般都是使用px,在之前的学习时就略微的学习了一些关于em.rem的知识,但是由于一直没有用到过,所以几乎全部忘记了.今天在研究一些知识的时候用到了em,所以特意将学到的知识总 ...

  2. css单位em、px、rem和pt的区别

    1.PX :像素(Pixel) PX是相对长度单位,它是相对于显示器屏幕分辨率而言的. 优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况. 2.EM:是相对长度单位. EM ...

  3. 响应式布局rem、rem方法封装、移动端响应式布局

    相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度 ...

  4. px,em,rem

    px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem. em:继承 ...

  5. 彻底弄懂css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...

  6. 搞清css的单位 px,em,rem的区别

    前言:现在上大街一眼望去,基本上90%的人都拿着手机,走路,逛街,吃东西都不停着,所以对于我们这种前端开发的程序猿来说,让网页适应于移动端可以说是必须要满足的.所以最近也是一直在学习和实践.然后就接触 ...

  7. (转)px、em、rem的区别和使用

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem(国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位),那么三者有什么区别,又各自有什么优劣呢? 一.px特点 1. IE ...

  8. /px/em/rem/的区别

    PX特点: 1 .IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3.Firefox能够调整px和em,rem,但是96%以上 ...

  9. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

随机推荐

  1. Linux服务器,PHP的10大安全配置实践

    PHP被广泛用于各种Web开发.而当服务器端脚本配置错误时会出现各种问题.现今,大部分Web服务器是基于Linux环境下运行(比如:Ubuntu,Debian等).本文例举了十大PHP最佳安全实践方式 ...

  2. html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)

    /** FormData ==>表单数据 能自动把表单数据拼接打包 当ajax发送数据时,发送打包的数据; 还可以使用FormData对象的append(key,value)添加数据 FormD ...

  3. SQL内部拼接执行SQL语句时,实现变量参数化

    exec sp_ExecuteSql执行的SQL语句拼接起是比较麻烦,如果关联的表多拼接过程是很容易出错的,下面这方法非常的好用,而且简单直观 if exists(select * from syso ...

  4. .net 获取https页面的信息 在iis7.5服务器上不管用

    让我纠结了一天多的问题,给大家看下,有相同情况的可以不用浪费时间了,本人当时找了好半天都没找到什么有用的信息,项目在本地没有问题,但部署在服务器后,获取不到https页面的信息,加入下面的代码就可以了 ...

  5. 怎样取消shutdown关机命令?-shutdown命令的使用解析

    机房上课,可恶电脑总是被管理员測试,不时地弹出这个关机提示.怎样取消这个关机命令呢?其有用 shutdown -a 就可以.以下来学习一下shutdown命令的使用:   shutdown这个命令预计 ...

  6. 从头开始学JavaScript (十)——垃圾收集

    原文:从头开始学JavaScript (十)--垃圾收集 一.垃圾收集 1.1javascript垃圾收集机制: 自动垃圾收集,执行环境会负责管理代码执行过程中的使用的内存.而在C和C++之类的语言中 ...

  7. lsof/netstat命令的一个重要作用: 根据进程查端口, 根据端口查进程

    我们知道, 根据ps -aux | grep xxx就是很快实现进程名和进程号的互查, 所以我们只说进程号pid就行. 如下示例中, 进程pid常驻. 1.  根据进程pid查端口: lsof -i ...

  8. FPM四:用OVP做查询跳转到明细

    前面做了查询的UIBB配置,在这边可以直接复用,查询的feeder class也就自动复用了. 1.给查询的feeder class添加接口,继续继承form的接口. 2.挨个实现每个方法,即使是用不 ...

  9. 帮助类-从tfs获取数据

    using JC.Helper; using Microsoft.TeamFoundation.Client; using Microsoft.TeamFoundation.Framework.Cli ...

  10. php源码安装,并配置apache支持php

    一.php安装准备环境 yum install zlib libxml libjpeg freetype libpng gd curl libiconv zlib-devel libxml2-deve ...