CSS中惯用的字体单位:px、em、rem和%的区别
2016-04-08 14:28
543 查看
CSS中惯用的字体单位:px、em、rem和%的区别
CSS中常用的字体单位:px、em、rem和%的区别 在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候。 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下。 先大致解释一下这些单位的意思: 1、pxCSS中常用的字体单位:px、em、rem和%的区别
在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候。
那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下。
先大致解释一下这些单位的意思:
1、px
px单位名称为像素,像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。许多网页设计师在web文档使用像素单位以生产浏览器渲染的像素完美呈现的网站。
像素单元的一个问题是,它没有为视障读者的扩展,以适应移动设备。
2、em
em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸,如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸,国外使用比较多;
em单位有如下特点
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
我们在写CSS的时候如果要用em为单位,需要注意以下几点:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
我们知道任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了【本文来自鸿网互联 (http://www.68idc.cn)】。
em是继承父元素的字体大小,可是当父元素字体大小改变时,又得重新计算了,这不怎么方便,还好rem解决了这个问题
3、rem
rem是CSS3新增的一个相对长度单位,只相对根目录即HTML元素
所以我们只要在html标签上设置字体大小为标准,文档中的字体大小都会以此为参照
html{font-size:62.5%; /* 10÷16=62.5% */}
body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */}
p{font-size:14px;font-size:1.4rem;}
兼容性:IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持,为了兼容不支持 rem 的浏览器,我们需要在 rem 前面写上对应的 px 值,这样不支持的浏览器可以优雅降级。
4、%
百分比单位更像“em”单位,除了一些根本性的差异。首先,当前的字体大小等于100%(比如12 pt = 100%)。当使用百分比单位,你的文字在移动设备上仍然保持完全的可伸缩性和可访问性。
一般来说,1 em = 16 px = 100%
个人总结:在一般的PC端网页制作过程中,px和em用的比较多,在移动端一般采用rem。
相关文章推荐
- CSS两列高度自适应,右边自适应
- CSS里常见的块级元素和行内元素
- CSS垂直三列居中,中间自适应
- 用css怎么制作下拉列表
- CSS之position浅谈
- 【笔记】 《js权威指南》- 第16章 脚本化CSS 16.3 脚本化内联样式 - 16.4 查询计算出的样式
- CSS3实现曲线阴影和翘边阴影
- CSS中的::after ::before
- 【笔记】 《js权威指南》- 第16章 脚本化CSS 16.2 重要的CSS属性(3)
- 前端学习之CSS基础知识(2)
- ECSHOP 如何将商品价格的样式修改掉或者是price_format函数修改
- 【笔记】 《js权威指南》- 第16章 脚本化CSS 16.2 重要的CSS属性(2)
- 【笔记】 《js权威指南》- 第16章 脚本化CSS 16.2 重要的CSS属性
- 纯CSS制作水平垂直居中“十字架”
- 详解CSS中的flex容器与flex属性
- 【css属性之cursor】 光标自定义
- css3 变形设计涂鸦墙
- 基础的CSS3弹性盒Flexbox布局使用实例
- 【笔记】 《js权威指南》- 第16章 脚本化CSS 16.1 CSS概览
- CSS3的Flexbox布局的简明入门指南