WEB前端开发用em替代px

前端微信公众号开发教程
微信公众众号需要前端开发吗
微信前端页面开发

过去的几年里,网页设计师用em替代px主要是为了文字缩放。因为老版本的internet Explorer无法缩放像素单位的文字。
不过现代浏览器很久以前就支持缩放以像素为单位的文字了。那用em替代px还有什么必要性或优越性呢?有两点显而易见的理由:一
是那些使用Internet Explorer 6的用户也将能够缩放文字,二是这样做可以使我们设计师和开发者的生活更简单。em的实际
大小时相对于其上下文的字体大小而言的。如果我们给<body>标签设置文字为100%,给其他文字都使用相对单位em,那这些文字都
受body上的初始声明的影响。这样做的好处就是,如果在完成所有文字排版后,客户又提出将页面文字统一放大一点,我们就可以只修改
body的文字大小,其他所有文字也会相应变大。
同样,“目标元素尺寸/上下文元素尺寸=百分百尺寸”这个公式也适应于文字的像素单位转换为相对单位。值得注意的是,现代浏览器的默认文字大小
都是16像素(显示声明的除外)。因此一开始给body标签应用下列任何一条规则所产生的效果都一样:
font-size:100%;
font-size:16px;
font-size:1em;
下面举一个例子,示例网站的样式表中,第一段以像素为单位的文字就是网页左上角的网站标题:AND THE WINNER ISN

logo{

display: block;
padding-top: 75px;
color: #0d0c0;
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: #0d0c0;
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 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>元素的文字大小(38像素)是相对于其父元素的文字大小(69像素)而言的。而它的行高(40像素)则相对于其本身的文字大小(38像素)而言。

注:em是什么?
em是书面形式的大写字母“M”的简称,发音和M相同。以前,“M”常被用来测定某种字体的大小,因为它是英文字母中最大(最宽)的字母。如今,em作为一个测量单位
,指得是特定字母的宽度和高度相对于特定字体的磅值的比例。

响应式web设计:HTML5和CSS3实战 这本书的一小段落.

前端微信公众号怎么开发的
前端开发 微信公众号
微信小程序前端开发编辑器
» 本文来自:前端开发者 » 《WEB前端开发用em替代px》
» 本文链接地址:https://www.rokub.com/7237.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!