用em替换px
来源:互联网 发布:迪优美特网络机顶盒多少钱 编辑:程序博客网 时间:2024/05/21 11:35
过去的几年里,网页设计师使用em替代px主要是为了文字缩放。因为老板本的Internet Explorer无法缩放像素单位的文字。不过现在浏览器很久以前就支持缩放以像素为单位的文字了。那用em替换px还有什么必要性或优越性呢?有亮点显而易见的理由:
一是那些使用IE6的用户也将能够缩放文字;
二是这样做可以使我们设计师和开发者的生活更简单。
em的实际大小是相对于其上下文的字体大小而言的。如果我们给标签设置文字大小为100%,给其他文字都使用相对单位em,那这些文字都会受 body上的初始声明的影响。这样做的好处是,如果在完成了所有文字排版后,客户又提出将页面文字统一放大一点,我们就可以只修改body的文字大小, 其他所有文字也会相应变大。
同样,“目标元素尺寸÷上下文元素尺寸=百分比尺寸”这个公式也适用于将文字的像素单位转换为相对单位。值得注意的是,现代浏览器默认文字大小都是16像素(显示声明的除外)。因此一开始给body标签应用下列任何一条规则所产生的效果都一样:
font-size:100%;
font-size:16px;
font-size:1em;
下面举例。第一段以像素为单位的文字就是页面左上角的
网站标题: AND THE WINNER ISN‘T…….
#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;}
因为48÷16=3,所以我们将样式修改如下:
#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*/ }
这个逻辑在整个网站中通用。如果发现出了毛病, 那应该是目标元素的上下文发生了变化。以页面中的标签为例:
<h1>Every year <span>when I watch the Oscares I'm annoyed...</span></h1>
修改后的相对单位样式如下:
#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*/}
可以看到元素的文字大小(38像素)是相对于其父元素的文字大小(69像素)而言的。而它的行高(40像素)则是相对于其本身的文字大小(38像素)而言。
现在,我们的页面结构可以自动缩放,文字大小也已从像素单位转换成相对单位。但是,我们还必须解决图片大小随视口缩放的问题。
见下次更新
- 用em替换px
- em px
- em和px
- 关于em和px
- em和px
- px pt em
- em和px
- PX PT及EM
- em和px
- em换算px
- rem em px 区别
- PX PT及EM
- PX EM REM 区别
- rem px em
- em和px区别
- em and px
- em px rem 区别
- px em rem关系
- 回调函数
- win64下安装配置eclipse+MySQL+Tomcat
- 二叉树中完全二叉树、满二叉树、二叉排序树、平衡二叉树的区别和联系
- android Studio 一打开报错:11facets cannot be loaded
- git status
- 用em替换px
- JAVA 比较两个日期相差的天数
- Git常用命令学习手册
- java https 请求
- Children of the Candy Corn(简单深搜+简单广搜)
- 容差码
- c#事件的继承处理
- C语言 fread()与fwrite()函数说明与示例
- 解析力评测(1) MTF和SFR