首先要记住网页中常规字体的大小为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. 【Beta Scrum】冲刺! 1/5

    0. Alpha阶段遗留问题 项目 功能/页面 功能/页面 WEB端 图片在线编辑 文件上传跨域问题 app端 作业展示页面 1. Beta计划表 功能 说明 web端 登录 完成web端登录页面及功 ...

  2. JdbcTemolate类的介绍<一>

    JdbcTemolate类的介绍 JdbcTemplate是Spring JDBC的核心类,封装了常见的JDBC的用法,同时尽量避免常见的错误.该类简化JDBC的操作,我们只需要书写提供SQL的代码和 ...

  3. Activiti工作流与BPMN2.0规范

    本章内容根据BPMN2.0规范的分类划分为以下部分: 1.启动与结束事件(event) 2.顺序流(Sequence Flow) 3.任务(Task) 4.网关(Gateway) 5.子流程(Subp ...

  4. jQ 移动端返回顶部代码整理

    //返回顶部 $('#btn-scroll').on('touchend',function(){ var T = $(window).scrollTop(); var t = setInterval ...

  5. 前端性能优化成神之路--图片懒加载(lazyload image)

    图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...

  6. 洛谷P1144 最短路计数

    题目描述 给出一个N个顶点M条边的无向无权图,顶点编号为1-N.问从顶点1开始,到其他每个点的最短路有几条. 输入输出格式 输入格式: 输入第一行包含2个正整数N,M,为图的顶点数与边数. 接下来M行 ...

  7. Arduino IDE for ESP8266 项目(3)创建AP+STA

    官网API:http://arduino-esp8266.readthedocs.io/en/latest/esp8266wifi/readme.html STA (客户端)手机连接路由器 S1 *简 ...

  8. vue v-for 遍历循环时的key值的报错

    问题如下: [Vue warn] Avoid using non-primitive value as key, use string/number value instead. non-primit ...

  9. 【转】取模(mod)与取余(rem)的区别——Matlab学习笔记

    昨天在学习Matlab的数学函数时,教程中提到取模(mod)与取余(rem)是不同的,今天在网上具体查了一下: 通常取模运算也叫取余运算,它们返回结果都是余数.rem和mod唯一的区别在于:    当 ...

  10. PAT A1132 Cut Integer (20 分)——数学题

    Cutting an integer means to cut a K digits lone integer Z into two integers of (K/2) digits long int ...