发帖  主题  评论  推荐  标签 用户 查搜   用户 密码 自动 注册  
 
面向对象 设计模式 领域驱动设计 企业架构 框架 开发教程 微服务 大数据 扩展性 并发编程 事件驱动 分布式 SOA

CSS的EM

  CSS中除了 使用px和百分数%进行大小定义以外,em和rem也是一种大小定义。em代表相对大小,1em等同于该html元素的font size字体大小定义,看看如下定义:

<article>
<h1>Title</h1>
<p>内容</p>
</article>

css定义如下:

article { font-size: 1.25em; }

大部分浏览器是将16px作为其字体的默认大小,也就是根元素的默认值,当然可以定制,这样这里的article元素中字体大小将使用16 * 1.25=20进行显示,也就是font-size:20px

那么如果是h1会怎样?

h1 { font-size: 1.25em; }

这里也定义了比基准大1.25倍,那么也是20px吗?不是,因为h1是嵌套在article这个已经有font-size为20px的里面,这样,1.25倍应该是其父元素article大小的1.25倍,也就是font-size:25px。如果h1在article外面,处于body下直接子元素,那么16px将是其默认大小,16*1.25则是20px。

em确实如此能够实现动态大小的定义,可以让每个元素都有自己的相对大小。

上面h1的大小是依据嵌套的父元素大小为基准,这种称为compounding复合特性,如果你不喜欢如此动态,那么使用rem可以获得全部是相对根元素大小相对变化。

rem表示根元素(root element,html)的字体大小。

h1 { font-size: 1.25rem; }

这里h1的大小将会是20px。

 

cutestrap一个都是使用rem的小型CSS框架

CSS的独特性Specificity

 

解道移动版 | 关注解道 | 联系解道 | 关于解道 | 广告联系 | 网站地图 | 设为首页

沪ICP证12033263 如有意见请与我们联系 Powered by JdonFramework
返回顶部