移动端em与rem区别
rem与em都是相对单位，我们使用它们的目的就是为了适应各种手机屏幕。
rem是根据html根节点来计算的，而em是继承父元素的字体。比如下面一个demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Test REM</title>
<style>
html{
font-size: 40px;
}
body{
font-size: 20px;
}
.use_em,.use_rem{
font-size: 14px;
}
.use_em span{
font-size: 1em;
}
.use_rem span{
font-size: 1rem;
} .img_em{
width: 2em;
height: 2em;
}
.img_rem{
width: 2rem;
height: 2rem;
} </style>
</head>
<body> <div class="use_em">
<span>font-size使用em</span>
</div> <div class="use_rem">
<span>font-size使用rem</span>
</div> <p>图片使用em</p>
<img src="../images/face01.jpg" class="img_em">
<p>图片使用rem</p>
<img src="../images/face02.jpg" class="img_rem"> </body>
</html>
第一个span继承了它的父元素div的大小，所以是14px,第二个span是通过html来计算的，所以是40px。第一个img继承的body，第二个img根据html来计算。通过这个简单的例子我们得知上面的结论是正确的。所以我们可以通过下面这种比例来对不同的手机屏幕做适配。
比如iphone5上的rem基值为32px，则渲染一张64*64px的div，则用2rem*2rem渲染，换算公式如下————
px/rem = 基值
对于一些固定的元素，我们不推荐使用rem，而改为使用px去确保在同一屏幕上保持一致，比如字体font-size，这个更趋向于阅读的实用性，不适合排版布局。
em 单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。
如果p元素有相应的px的话，他会根据自身条件来计算，否则会继承父元素的px。就是说如果我给p元素去掉font-size，那他的padding是32px,就是说我们在使用em时必须要正确管理各个元素。所以个人推荐rem更适合于移动端，它给我们的一个途经去获取用户的偏好来影响网站中每一处使用rem的元素大小，不再是使用固定的 px 单位。
移动端em与rem区别的更多相关文章
- px、em、rem区别介绍
px.em.rem区别介绍 PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能 ...
- CSS3- px、em、rem区别介绍
PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em ...
- em，rem区别比较
rem是基于html元素的字体大小来决定,而em则根据使用它的元素的大小决定. 注意:很多人错误以为em是根据父类元素,实际上是使用它的元素继承了父类元素的属性才会产生的错觉. 主要区别 em 和 r ...
- css总结5：px、em、rem区别介绍
1 PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. 浏览器无法调整px单位的字体,以em或rem为字体单位可调整字体. 2 EM em是相对长度单 ...
- 【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- em 与 rem 区别.
em 与自身 字体大小有关. rem 与 body 的字体大小有关..
- em和rem区别
em大小依据父元素的字体大小的倍数 rem大小依据与根元素,即html标签的font-size大小
- 了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配
本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. ...
- （转）px、em、rem的区别和使用
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem(国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位),那么三者有什么区别,又各自有什么优劣呢? 一.px特点 1. IE ...
随机推荐
- MQ产品比较-ActiveMQ-RocketMQ
几种MQ产品说明: ZeroMQ : 扩展性好,开发比较灵活,采用C语言实现,实际上他只是一个socket库的重新封装,如果我们做为消息队列使用,需要开发大量的代码 RabbitMQ :结合erla ...
- GLUT Trackball Demo
GLUT Trackball Demo eryar@163.com 1.Introduction 在三维场景中建立模型后,为了方便用户从各个角度观察模型,从而需要对三维视图进行控制.常见的视图交互控制 ...
- Web前端性能优化全攻略
网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多 ...
- Expression 转化为sql(三) --自定义函数
SQL 语句有很多函数如len(),now()等等.如何来生成这些函数.最近研究也写办法共大家参考. 一.首先建立一个建一个扩展类,控制只能允许这些函数出现,如果出现其他函数就直接报异常. publi ...
- iOS bug调试技巧学习----breakpoint&condition
给断点添加条件 - (void)testCondition2 { NSArray *array = @[@"我们", @"一起", @"来" ...
- 浅论ajax跨域！从一个例子开始！
//所谓跨域,简单来说就是去访问不是自己域名下的数据 <!DOCTYPE html> <html lang="en"> <head> <m ...
- ZooKeeper数据模型
ZooKeeper有一个分层的命名空间,类似分布式文件系统.它们唯一的区别就在于在命名空间中每个节点可以有数据关联作为它们的子节点.这就像有一个文件系统允许文件也作为文件目录.节点路径通常表示为规范的 ...
- MATLAB仿真中连续和离散的控制器有何区别？
matlab系统同时提供连续和离散的控制器和对象的目的是:在降低用户使用复杂程度的同时提高仿真精度.仿真速度和应用的广泛性. 仿真步长和求解精度的概念对于理解这个问题至关重要. 首先是步长,步长和求解 ...
- 如何使用wait(), notify() and notifyAll() – Java
Java多线程是个很复杂的问题,尤其在多线程在任何给定的时间访问共享资源需要更加注意.Java 5引入了一些类比如BlockingQueue 和Executors 类提供了易于使用的API,避免了一些 ...
- linux iptables规则介绍
今天又学习了一下iptables,做一点总结来方便以后查阅. Netfilter(网络过滤器)是Linux操作系统核心层内部的一个数据包处理模块,主要负责数据包的拦截和转发,而iptables是Net ...