文章标题

转载 2016年06月02日 10:43:15

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?
PX特点

  1. IE无法调整那些使用px作为单位的字体大小;

  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

  3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

   任意浏览器的默认字体高都是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作为单位就行了。

EM特点

  1. em的值并不是固定的;

  2. em会继承父级元素的字体大小。

所以我们在写CSS的时候,需要注意两点:

  1. body选择器中声明Font-size=62.5%;

  2. 将你的原来的px数值除以10,然后换上em作为单位;

  3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

    也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

rem特点

    rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是

一个例子:

p {font-size:14px; font-size:.875rem;}

注意:

    选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

在这里为大家提供一个px,em,rem单位转换工具

地址:http://pxtoem.com/

转子:原文地址

文章标题自动标注程序

  • 2015年06月25日 17:04
  • 6.93MB
  • 下载

文章标题 使用ajaxFileupload+struts2完成文件的上传以及回显到jsp的链接地址

积累点滴,从这一刻开始 jsp页面部分 第一步: jsp页面导入 ajaxfileupload.js文件 第二步:编写上传文件的文本框: 第三步: struts2后台部...

文章标题上下轮番滚动.zip

  • 2012年09月04日 12:31
  • 28KB
  • 下载

在文章中主标题和副标题的格式问题

请问:如果 大标题居中书写。正常情况下,副标题要在大标题第三个字下开始写破折号,是吗?那如果格数不够,副标题写不开了怎么办?可以把副标题居中写吗? 还是把 大标题和副标题整体前移?不是论文,手写的,公...

文章标题n个人围成一圈,顺序排号。从第一个人开始报数(1~3),凡报到3的人退出圈子,问最后留下来的是原来几号的那位?

第一封技术博客,从小白开始,一同成长!审题:围成一圈报数,固当第一次报到3的时候,就应该退出这个圈子,不在进行下面的报数,对计算机而言,就是跳过这个“喊出3的人” 接着从“1,2”开始。怎么跳过呢?给...

PL/SQL记录和表(oracle type(数组))(最简单!文章下面标黄标题是精华,必看)

PL/SQL记录和表 1.使用%TYPE  (用于基本数据类型) 例1(用户并不知道Course_No的数据类型,只知道他是基于Student_No数据类型的,随着Student_No的类型变化而...

文章标题:Deeplearning原文作者Hinton代码注解

Matlab示例代码为两部分,分别对应不同的论文: 1. Reducing the Dimensionality of data with neural networks   ministdee...
  • lvfeiya
  • lvfeiya
  • 2015年07月17日 19:19
  • 369

文章标题Matlab GUI学习笔记(一)function “funcname” 工作区和基本工作区

最近学习matlab的GUI编程,非图形化方式,发现使用回调函数传递句柄类型的变量是时总是提示该变量未定义: Error using matlab.ui.Figure/set Invalid or ...
  • guguizi
  • guguizi
  • 2016年03月10日 17:03
  • 1335

文章标题 CSU 1849: Comparing answers(矩阵降维+随机化思想)

1849: Comparing answers这里写链接内容 题意:题意是有矩阵A,B,然后判断A*A ?= B ,直接做O(n*n*n) 分析:矩阵降维 A*A*C ?= B*C, C 是一...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:文章标题
举报原因:
原因补充:

(最多只允许输入30个字)