响应式布局中为什么要使用em设置字体大小而不用px
2015-11-09 16:54
369 查看
px像素(Pixel)。相对长度单位。像素px是相对于不同设备显示器屏幕分辨率(pad/phone/pc)而言的。(引自CSS2.0手册)
1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值。任何浏览器的默认字体大小都是16px。
px相对的屏幕分辨率,而em相对于父级div,所以在响应式布局中使用em更合适,因为任何浏览器默认字体大小是固定的,而不同设备屏幕分辨率却各不相同。
em有如下特点:
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
所以我们在写CSS的时候,需要注意两点:
1. body选择器中声明font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
<body style="font-size:62.5%"> 1em默认是16px,这里1em变为10px
<aside style="font-size:1.2em;"> 继承body这里的1.2em是12px
<p style="font-size:1em;"></p>继承自aside,所以这里的1em也是12px
</aside>
</body>
也就是避免1.2 * 1.2= 1.44的现象。比如说你在aside中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承aside的字体高而变为了1em=12px。
1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值。任何浏览器的默认字体大小都是16px。
px相对的屏幕分辨率,而em相对于父级div,所以在响应式布局中使用em更合适,因为任何浏览器默认字体大小是固定的,而不同设备屏幕分辨率却各不相同。
em有如下特点:
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
所以我们在写CSS的时候,需要注意两点:
1. body选择器中声明font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
<body style="font-size:62.5%"> 1em默认是16px,这里1em变为10px
<aside style="font-size:1.2em;"> 继承body这里的1.2em是12px
<p style="font-size:1em;"></p>继承自aside,所以这里的1em也是12px
</aside>
</body>
也就是避免1.2 * 1.2= 1.44的现象。比如说你在aside中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承aside的字体高而变为了1em=12px。
相关文章推荐
- svn解决不能clean的方法
- ubuntu下定时任务的执行
- [leetcode287] Find the Duplicate Number
- 第十周项目2-二叉树遍历的递归算法
- 第11周—项目1(2).1由先序序列和中序序列构造二叉树
- 第十周项目1 建立二叉树算法库
- nfs挂载根文件系统笔记
- Codeforces Round #330 (Div. 2)B Pasha and Phone
- Spring3中js/css/jpg/gif等静态资源无法找到(No mapping found for HTTP request with URI)问题解决
- 函数的可重入性(reentrant)及线程安全
- iOS在线播放视频
- 在JS中如何实现动作
- Delphi PDF
- 使用jquery获取radio的值
- linux eclipse中C++连接mysql数据库
- 第十一周项目2-用二叉树求解算数表达式
- 软件工程c编码随笔
- swift 快速奔跑的兔几 本节的内容是:SpriteKit第三讲 纹理和纹理贴图集
- cocos2d-x 左下角的FPS,3行数字分别表示什么?
- Spring注解详解