首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

响应式Web设计:使用HTML5和CSS3实践 (7)

响应式Web设计:使用HTML5和CSS3实践 (7)

3.4 用em换成px

最初设计师们使用em是因为在老版本的Internet Explorer无法缩放像素单位的文字。但现代浏览器早就支持了,那么用em替代px还有什么优越性呢。有两点理由:

(1)那:wq些使用Internet Explorer的用户也能够缩放文字

(2)这样做使设计师们的工作变得更加简单

em的实际大小是相对于上下文字体大小而言的,如果我们给body标签设置的文字大小是100%,给其他的文字都使用相对单位em,那么这些字体都会受到body上的初始声明的影响。这样做的好处是,如果完成了所有文字排版以后客户提出希望把字体整体调大一些,那么我们只需要修改body的文字大小其他所有文字都会相应变化。

同样,目标元素尺寸 / 上下文元素尺寸 = 百分比尺寸 这个公式也适用于将文字的像素单位转换为相对单位。现代浏览器的默认字体大小都是16像素(作者疏漏了还是过时了明明是14好么),因此一开始给body标签应用如下任何一条规则都是一样的效果:

    font-size: 16px;
    font-size: 100%;
    font-size: 1em;

举一个例子,我们为为网站标题设置了如下样式:

    #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,我们可以对字体大小进行改动:

font-size: 3em; /* 48 ÷ 16 = 3*/

如果应用这个规则除了毛病,通常是目标元素的上下文发生了变化,以页面中的标签为例:

<h1>Every year <span>when I watch the Oscars 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 */
    }

可以看到,span的元素大小是相对于其父元素的文字的大小,而它的行高是相对于文字本身的大小。
返回列表