本站公告: 暂无公告....

响应式设计为什么要用em替换px

前端开发 兰亭楼 0评论 781浏览
[caption id="" align="alignleft" width="640"]响应式设计为什么要用em替换px 响应式设计为什么要用em替换px[/caption]                             过去的几年里,网页设计师使用em替代px主要是为了文字缩放。因为老版本的InternetExplorer无法缩放像素单位的文字。不过现代浏览器很久以前就支持缩放以像素为单位的文字了。 那用em替换px还有什么必要性或优越性呢?有两点显而易见的理由:一是那些使用Internet Explorer 6的用户也将能够缩放文字,二是这样做可以使我们设计师和开发者的生活更简单。em的实际大小是相对于其上下文的字体大小而言的。 如果我们给<body>标签设置文字大小为100%,给其他文字都使用相对单位em,那这些文字都会受body上的初声明的影响。这样做的好处就是,如果在完成了所有文字排版后,客户又提出将页面文字统一放大一点,我们就可以只修改body的文字大小,其他所有文字也会相应变大。 同样,“目标元素尺寸÷上下文元素尺寸=百分比尺寸”这个公式也适用于将文字的像素单位转换为相对单位。值得注意的是,现代浏览器的默认文字大小都是16像素(显式声明的除外)。因此一开始给body标签应用下列任何一条规则所产生的效果都一样: [css] font-size: 100%; font-size: 16px; font-size: 1em; [/css] 下面举一个例子。示例网站的样式表中,第一段以像素为单位的文字就是页面左上角的网站标题:AND THE WINNER ISN’T… [css] #logo { display: block; padding-top: 75px; color: #0d0c0c; text-transform: uppercase; font-family: Arial, "Lucida Grande", Verdana, sans-serif font-size: 48px; } #logo span { color: #dfdada; } [/css] 因为48 ÷ 16 = 3,所以我们将样式修改如下: [css] #logo { display: block; padding-top: 75px; color: #0d0c0c; text-transform: uppercase; font-family: Arial, "Lucida Grande", Verdana, sans-serif; font-size: 3em; /* 48 ÷ 16 = 3*/ } [/css] 这个逻辑在整个网站中通用。如果发现哪出了毛病,那应该是目标元素的上下文发生了变化。以页面中的标签为例: [css] <h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1> [/css] 修改后的相对单位样式如下: [css] #content h1 { font-family: Arial, Helvetica, Verdana, sans-serif; text-transform: uppercase; font-size: 4.3125em; } /* 69 ÷ 16 */ #content h1 span { display: block; line-height: 1.052631579em; /* 40 ÷ 38 */ color: #757474; font-size: .550724638em; /* 38 ÷ 69 */ } [/css] 可以看到<span>元素的文字大小(38像素)是相对于其父元素的文字大小(69像素)而言的。而它的行高(40像素)则是相对于其本身的文字大小(38像素)而言。

转载请注明: 兰亭楼 » 响应式设计为什么要用em替换px

发表我的评论 换个身份
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址