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. Docker - docker machine

    前言 之前在使用docker的时候,对于docker-machine的理解有一些误解(之前一直以为docker-machine和docker-engine等价的,只不过是在window或者mac平台上 ...

  2. Javaweb---如何使用eclipse创建Javaweb项目

    在配置好--服务器Tomcat与Eclipse后,进行项目创建 配置地址:http://blog.csdn.net/baidu_37107022/article/details/71405194 流程 ...

  3. weather API 天气api接口 收集整理

    腾讯 http://sou.qq.com/online/get_weather.php?callback=Weather&city=南京 中国天气-weather.com.cn http:// ...

  4. sql拼接，String和Stringbuffer的问题

    首先提出来一个问题: 下边两种拼字符串的方式,哪种更好一些,或者还有更好的方式? StringBuffer hql=new StringBuffer(); hql.append("from ...

  5. node.js搭建代理服务器请求数据

    1.引入node.js中的模块 var http = require("http"); var url = require("url"); var qs = r ...

  6. win10 搜索不能使用解决方法

    重装系统之后遇到一个问题,在搜索栏不能搜索到应用程序,Windows 10 Search can't find ANY applications. Even calculator - Super Us ...

  7. 高性能队列Disruptor系列3--Disruptor的简单使用（译）

    简单用法 下面以一个简单的例子来看看Disruptor的用法:生产者发送一个long型的消息,消费者接收消息并打印出来. 首先,我们定义一个Event: public class LongEvent ...

  8. PHPCMS V9 导航栏当前栏目高亮

    实际上这个东西可有可无,很多站点看似导航栏当鼠标指向后都会变化等高亮处理,一般都比较醒目,但是实质点击过去后,都还是只是刚才的样式,因为这些站点的导航栏都没有对当前选中栏目做CSS的指定变化处理. 该 ...

  9. PHP设计模式：抽象工厂

    示例代码详见https://github.com/52fhy/design_patterns 抽象工厂 抽象工厂(Abstract Factory)是应对产品族概念的.比如说,每个汽车公司可能要同时生 ...

  10. 搭建phabricator代码审核工具

    phabricator 依赖环境 系统centos,mysql,php,nginx 1.下载安装脚本 https://secure.phabricator.com/source/phabricator ...