em和rem的概念和用法

em 相对长度单位

  1. 相对参照物为父元素的font-size
  2. em有继承性
  3. 没有设置font-size时, 浏览器会有一个默认的em设置

rem 相对参照物为根元素html, 相当于参照物固定不变

  1. 比较好计算
  2. 没有设置font-size时, 浏览器有一个默认的rem
  3. 有兼容性问题, 并不是所有浏览器都支持rem, IE8及以下的浏览器都不支持

1 rem = 16 px  与em一致

eg

font-size = 62.5% 时, 1 rem = 10 px

font-size = 100% 时, 1 rem = 16px

时间： 2024-10-21 04:59:38

em和rem的概念和用法的相关文章

页面适配之pt、px、em、rem的用法

我们在开发页面时,会遇到pt.px.em.rem这四种单位.下面介绍一下这四个单位. 1.pt,英文为points,绝对长度单位,意为磅.设计软件zeplin所用的单位就是pt.现在很少使用这个单位了. 2.px,英文为pixel,相对长度单位,意为像素.是相对于屏幕分辨率的单位,国内主流单位. 3.em,相对长度单位,相对于当前对象内文本的字体尺寸,即em的计算是基于父级元素font-size的.比如: <body style="font-size:14px"> <

css 中的position z-index em rem zoom 的基本用法

1.position定位: CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置. CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在 (X)HTML

css中的px、em、rem 详解

概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选.Windows系统默认是96dpi,Apple系统默认是72dpi. 2.em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em.现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等.通常1em=16px

深度讲解VIEWPORT和PX是什么？移动端单位px，em，rem

刚开始接触移动页面重构,是不是很迷惑应该按照多大的尺寸制作?320.640还是720?按照640的设计稿重构完页面,是不是还需要写其他尺寸来适配不同的屏幕大小?—— 这源于对viewport和px的不了解. 已经重构了好多移动页面,但是对为什么要按照640的大小来设计页面,不清楚答案.给元素赋予固定的像素值,但是奇怪的是在不同的手机里看起来都差不多大小,不需要另外去适配,真是太爽了.为什么?不知道耶. ——这源于对viewport和px的不了解. 先来罗列下学习移动页面重构的过程中可能看到过迷糊

CSS -- 字体单位（px、em、rem）

web页面常用记量单位:px.em.rem: 任意浏览器的默认字体都是16px.所有未经调整的浏览器都符合: 16px = 1em = 1rem. ==>在一个CSS选择器被写入时,浏览器就有了一个“16px”大小的默认渲染字体.此时我们Web页面中的<body>就继承了这个“font-size:16px;”,除非你在CSS样式中显式的设置<body>的“font-size”值,来改变其继承的值. 1.px / em / rem 区别.优缺点 px:相对长度单位 -- 绝对值

OC学习篇之---协议的概念和用法

这一篇文章我们在来看一下OC中协议的概念以及用法,协议也是OC中的一个重点,Foundation框架以及我们后面在写代码都会用到. OC中的协议就是相当于Java中的接口(抽象类),只不过OC中的名字更形象点,因为我们在学习Java中的接口时候,看可以知道其实接口就相当于一种契约(协议),给他的实现类打上标记了,当然这个活在Java5.0之后,被注解替代了,因为注解就是为了此功能诞生的. 协议就是定义了一组方法,然后让其他类去实现 下面来看代码: WithProtocol.h [objc] vi

PLSQL_Material View物化视图的基本概念和用法（概念）

2014-06-08 BaoXinjian 1. 用法 物化视图是包括一个查询结果的数据库对象,它是远程数据的的本地副本,或者用来生成基于数据表求和的汇总表. 物化视图存储基于远程表的数据,也可以称为快照.对于复制,物化视图允许你在本地维护远程数据的副本,这些副本是只读的. 如果你想修改本地副本,必须用高级复制的功能.当你想从一个表或视图中抽取数据时,你可以用从物化视图中抽取. 对于数据仓库,创建的物化视图通常情况下是聚合视图,单一表聚合视图和连接视图. 实现两个数据库之间的数据同步,可以存在时

css中em和rem的区别

在css中单位长度用的最多的是px.em.rem,这三个的区别是:1.px是固定的像素,一旦设置了就无法因为适应页面大小而改变.2.em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局. 对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素.rem中的r意思是root根. em:1.子元素字体大小的em是相对于父元素字体大小2.元素的width/height/padding/margin用em的话是相对于该元素的font-size

em、rem和px的区别

1.em与px的问题 px是何物? px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册)  em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸.(引自CSS2.0手册) PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上的中国网民