背景:

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

em:继承父级的。假设html的font-size默认为16px,body字体大小定义为50%,那么在body里字体大小就是1em=8px了。可当你又定义了一个div,然后把字体设置成了50%,请问,现在div下的1em等于多少?因为继承了父级的值,现在这个div里的1em=4px,这么嵌套下去的话,抱歉,我数学不好!所以不建议用em。

rem:是em的升级版,rem只会相对html的值,不会受到父级的影响,这样的好处在于:从em里的例子来讲,1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的,所以ie8或以下请无视(始终想不明白,为什么国人至今对微软都放弃的ie这么恋恋不舍)。

以上也算是讲清了他们之间的区别和关系,rem更多的运用于移动H5页面的适配使用。

px em 和rem之间的区别的更多相关文章

  1. em与rem之间的区别以及移动设备中的rem适配方案

    em与rem之间的区别: 共同点: 它们都是像素单位 它们都是相对单位 不同点: em大小是基于父元素的字体大小 rem大小是基于根元素(html)的字体的大小 实例: <!DOCTYPE ht ...

  2. css中字体常用单位px、em、rem和%的区别及用法总结

    一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...

  3. 彻底弄懂px,em和rem的区别

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

  4. css中单位px,em,rem和vh/vw的理解

    >px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认 ...

  5. 网页常见单位: px em pt % rem vw、vh、vmin、vmax , rem 使用

    1.网页常见单位:  px  em  pt    vw\vh   rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言  (最终解析单位) em单位名称为相对长度 ...

  6. 详细讲解css单位px,em和rem的含义以及它们之间的区别

    一.首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现! 可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚 ...

  7. px、em、pt之间的区别与互相转换

    关于px.pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之.点击查看原文(原网址已失效,这是其他站点) 这里引用的是Jor ...

  8. CSS中常用的字体单位:px、em、rem和%的区别

    在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: ...

  9. px与与rem vw的区别

    1.px 使用具体像素点为单位,好处是比较稳定和精确,但在浏览器放大缩小会出现问题 2.rem 参考根元素的值 例如设置根元素字体大小是20像素 在h1中设置字体大小 那么H1的大小就是40px p的 ...

随机推荐

  1. Electron-Vue使用element-ui el-table不显示/卡死

    我们需要把element-ui加入到.electron-vue/webpack.renderer.config.js文件中的白名单里面 在这句话let whiteListedModules = ['v ...

  2. ansible的基础使用(一)

    ansible基础使用(一) ansible的主要功能 A:为什么是ansible B:ansible的安装 C:ansible的相关文件 D:ansible的基本使用 ansible的简单操作 A: ...

  3. 17 JQuery高级----学习笔记

    1. 动画(1) 三种方式显示和隐藏元素 <1> 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数: 1. speed:动画的速度.三个预定义的 ...

  4. ES6新增的一些特性

    1.let关键字,用来代替 var的关键字,特点: 1.变量不允许被重复定义 2.不会进行变量声明提升 3.保留块级作用域中i的 2.const定义常量,特点:1.常量值不允许被改变 2.不会进行变量 ...

  5. Selenium自动化获取WebSocket信息

    性能日志 ChromeDriver支持性能日志记录,您可以从中获取域“时间轴”,“网络”和“页面”的事件,以及指定跟踪类别的跟踪数据. 启用性能日志 默认情况下不启用性能日志记录.因此,在创建新会话时 ...

  6. SPI通讯(Serial Peripheral interface)

    1. SPI,是一种高速的,全双工,同步的通信总线,并且在芯片的管脚上只占用四根线:SCLK,MISO,MOSI,CS 2. SPI结构简图: 可以看出,SPI主从设备两端都有一个位移寄存器,数据在位 ...

  7. 【HC89S003F4开发板】 10汇编指令

    HC89S003F4开发板汇编指令 一.数据传递类指令 MOV.MOVC.MOVX 1.MOV,用于片内数据存储器中的数据传递指令中. 2.MOVC是与ROM之间的数据传送,而MOVX是与外部RAM数 ...

  8. Django模型层之单表操作

    Django模型层之单表操作 一 .ORM简介 我们在使用Django框架开发web应用的过程中,不可避免地会涉及到数据的管理操作(如增.删.改.查),而一旦谈到数据的管理操作,就需要用到数据库管理软 ...

  9. 2.2_Database Interface:ODBC基本概念

    一.无ODBC时代 一般来讲不同的数据库厂商都有自己的数据库开发包,这些开发包支持两种模式的数据库开发; 1.预编译的嵌入模式(例如Oracle的ProC,SQL Server的ESQL) 2.API ...

  10. IIS配置文件的XML格式不正确 applicationHost.config崩溃

    错误提示如图: 检查C:\Windows\System32\inetsrv\config目录下的applicationHost.config文件,备份一份. 可使用IIS提供的AppCmd.exe的r ...