前端开发者| 前端微信公众号开发教程 |
| 微信公众众号需要前端开发吗 |
| 微信前端页面开发 |
过去的几年里，网页设计师用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实战 这本书的一小段落.
| 前端微信公众号怎么开发的 |
| 前端开发 微信公众号 |
| 微信小程序前端开发编辑器 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册