首先要记住网页中常规字体的大小为16px。

px是用来设置字体的绝对大小。通常为用于物理值的设置。我们在互联网上看到的常规字体大小为16px。而em是指相对于父元素的大小。1em是父元素的1倍,2em就是大小为父元素的2倍。当前,一般情况下,父元素的默认字体为16px。所以通常会认为1em = 16px

绝大多数浏览器都支持更改网页的字体大小,例如chrome浏览器就是CTRL和'+'同时按下,放大字体。同理CTRL+‘-’就是缩小字体。或者CTRL+滚轮。但是IE无法调整那些使用px作为单位的字体大小。而国外的大部分网站都采用em作为字体大小。

px em
px像素(Pixel)是绝对长度单位,像素px是相对于显示器屏幕分辨率而言的。 em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(16px)。
px是绝对单位,不支持IE8以下的缩放。但是FireFox,Chrome和IE8以上都支持。 em是相对单位,网页中的文字能放大和缩小。将行距(line-height),和纵向高度的单位都用em。保证缩放时候的整体性。
px 宽度常用在图片宽度的定义等绝对定义的场合,使用 px 设计的网页不会因为父元素的大小而改变,这样可以保证设计的精确度。 中文文章的段落首行缩进两个字符直接使用 p {text-indent: 2em} 就行。在其他需要依字体大小来设置宽高度,大小的使用 em 也是比较方便的。

CSS字体大小之em,px,百分比的更多相关文章

  1. css字体大小设置em与rem的区别

    em 单位em是相对于父元素的,如果父元素没有设置字体大小,那就会追溯到body. 比如  如果我在box_text的父元素box加了一个字体大小   那么body的8px就会被box_text的父元 ...

  2. (转)CSS字体大小: em与px、pt、百分比之间的对比

    CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争 ...

  3. CSS字体大小: em与px、pt、百分比之间的对比

      CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的 ...

  4. 响应式布局中为什么要使用em设置字体大小而不用px

    px像素(Pixel).相对长度单位.像素px是相对于不同设备显示器屏幕分辨率(pad/phone/pc)而言的.(引自CSS2.0手册) 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此 ...

  5. CSS字体大小设置时的参考(转)

    from:http://blog.sina.com.cn/s/blog_51cd580b0100gg6y.html font-size 设置的绝对关键字: 以下几个绝对字体大小的设置是有效的.当然他们 ...

  6. CSS——字体大小最常用的单位

    px (像素): 将像素的值赋予给你的文本.这是一个绝对单位, 它导致了在任何情况下,页面上的文本所计算出来的像素值都是一样的. ems: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更 ...

  7. css字体大小单位

    1:px: 这个应该是国内使用较多的单位,意思为像素.因此,其视觉的呈现效果是与分辨率相关的.例如在1024*768分辨率下看12px的字体就比960*640下看到的“小”,其实字体像素未改变,所以觉 ...

  8. Chrome浏览器下CSS字体大小设置小于12px无效问题

    当字体大小被设置小于12px时,IE.firefox可以起作用.但chrome中仍然显示为12px大小. 解决方法为: html, body {     -webkit-text-size-adjus ...

  9. CSS 小结笔记之em

    1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的 ...

随机推荐

  1. 初识SpringCloud微服务

    微服务是一种架构方式,最终肯定需要技术架构去实施. 微服务的实现方式很多,但是最火的莫过于Spring Cloud了.为什么? 后台硬:作为Spring家族的一员,有整个Spring全家桶靠山,背景十 ...

  2. [Eclipse+PyDev]ImportError: DLL load failed:找不到指定的模块 解决方案

    1. 环境 Eclipse 4.4.2 Python 3.5 Window 8.1 2. 问题 在代码中import numpy时,提示 " ImportError: DLL load fa ...

  3. jquery的自定义事件通过on绑定trigger触发

    jquery绑定自定义事件,可以实现预先绑定好一个处理方法,当需要使用的时候利用jquery trigger来触发自定义事件,以达到方便快捷的目的.我们来假设一个这样的场景,一个textarea中的字 ...

  4. WPFの获取任意元素的位置

    如果布局在Grid中: 方法一: //_stackPanel为子元素,_grid为父元素 Point point = _stackPanel.TranslatePoint(new Point(0, 0 ...

  5. session、cookie 记住登录状态的实现

    Cookie的机制 Cookie是浏览器(User Agent)访问一些网站后,这些网站存放在客户端的一组数据,用于使网站等跟踪用户,实现用户自定义功能. Cookie的Domain和Path属性标识 ...

  6. ucml 查询组件

    查询视图组件通常用于通过某些字段来查询数据,在页面设计处选好需要查询的字段,并设置操作符等信息最后设计页面添加执行查询的按钮即可,页面效果同编辑视图组件. 具体操作示例: 1.添加一个新的查询组件VC ...

  7. android 模仿大众点评团购卷列表多余3条时折叠,点击时显示剩余全部的功能

    要实现这样一个效果:加载一组数据,当这组数据的条数超过2条时,则这显示两条,其余的隐藏,当点击“展开全部时”在显示余下的部分.效果如下图所示: 展开前的效果: 展开后的效果 : 实现思路:控制数据而不 ...

  8. 在lua中创建字段安全的对象

    lua萌新,刚刚学习和使用不到一个月.有不对的地方,还望各路大神不吝赐教. lua中可以用table来模拟对象,但table是可以任意增加键值的.在对象模拟中,暂且也叫它为字段(field)吧.如果在 ...

  9. springbootAdmin+eureka集群+swagger

    请移步githubb下载源码.知识共享.(https://github.com/yivvonllh) 或者直接git下载(https://github.com/yivvonllh/spring-clo ...

  10. java計算年齡的工具類

    整理一篇Java計算年齡的工具類,方便實用 public static int getAgeByBirth(String birthday) throws ParseException { // 格式 ...