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区别的更多相关文章

  1. px、em、rem区别介绍

    px.em.rem区别介绍 PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能 ...

  2. CSS3- px、em、rem区别介绍

    PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em ...

  3. em,rem区别比较

    rem是基于html元素的字体大小来决定,而em则根据使用它的元素的大小决定. 注意:很多人错误以为em是根据父类元素,实际上是使用它的元素继承了父类元素的属性才会产生的错觉. 主要区别 em 和 r ...

  4. css总结5:px、em、rem区别介绍

    1 PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. 浏览器无法调整px单位的字体,以em或rem为字体单位可调整字体. 2 EM em是相对长度单 ...

  5. 【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. em 与 rem 区别.

    em 与自身  字体大小有关. rem 与 body 的字体大小有关..

  7. em和rem区别

    em大小依据父元素的字体大小的倍数 rem大小依据与根元素,即html标签的font-size大小

  8. 了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配

    本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. ...

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

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

随机推荐

  1. mongo查询系统

    首先,我们先向集合(collections)中添加测试文档(documents).如下: > for(i=1;i<=5;i++) db.test.insert({x:i,y:i*i,z:6 ...

  2. 基于NIO的Netty网络框架

    Netty是一个高性能.异步事件驱动的NIO框架,它提供了对TCP.UDP和文件传输的支持,Netty的所有IO操作都是异步非阻塞的,通过Future-Listener机制,用户可以方便的主动获取或者 ...

  3. mysql之 mysql 5.6不停机主从搭建(一主一从基于GTID复制)

    环境说明:版本 version 5.6.25-log 主库ip: 10.219.24.25从库ip:10.219.24.22os 版本: centos 6.7已安装热备软件:xtrabackup 防火 ...

  4. hibernate配置三步走

    1.导入有hibernate的required和jpa的jar包,数据库驱动jar包,日志jar包 2.创建实体类,必须有一个属性有唯一的值 package com.hui.hibernate; pu ...

  5. SHELL命令集锦

    1.定时任务crond使用. crontab -e -u www文件编辑保存在/var/spool/cron/www文件中. 参考示例: */1 * * * * /usr/local/php/bin/ ...

  6. Java基础——抽象类和接口

    之所以将抽象类和接口放在一起做笔记,是因为他们之间很难区分又各自独立.在学习完Java程序设计的三大特点(封装.继承.多态)之后,我最大的收获是,慢慢理解了Java语言这种面向对象程序设计的优越性,它 ...

  7. DDD理论学习系列(7)-- 值对象

    DDD理论学习系列--案例及目录 1.引言 提到值对象,我们可能立马就想到值类型和引用类型.而在C#中,值类型的代表是strut和enum,引用类型的代表是class.interface.delega ...

  8. vue组件(Vue+webpack项目实战系列之三)

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.特别对于大型应用开发来说,尽量组件化,并且先造好轮子库,不要重复去写组件,这会显著提升项目 ...

  9. URLWRITE视图重写技术

    UrlRewrite就是地址重写,用户得到的全部都是经过处理后的URL地址,类似于Apache的mod_rewrite.将我们的动态网页地址转化为静态的地址,如html.shtml,还可以隐藏网页的真 ...

  10. mysql数据与Hadoop之间导入导出之Sqoop实例

    前面介绍了sqoop1.4.6的 如何将mysql数据导入Hadoop之Sqoop安装,下面就介绍两者间的数据互通的简单使用命令. 显示mysql数据库的信息,一般sqoop安装测试用 sqoop l ...