每日分享（已然变成了每周分享。。）

5年前的蔡康永还试图用《说话之道》，

来教人好好说话，成为一个讨人喜欢的人。

但那之后，他意识到：

“如果什么事情都指望着自己去符合别人的期望，

终究有一天会感到很吃力，

我们应该为自己活一次。”

==========================

今天完成的事情：

1. 更新了 Task3 的 html 页面， 添加了针对移动端下的图片以及文字的尺寸变更。

2. 解决了文字乱码的问题（UTF-8）

看到验收要求的是UTF-8编码格式，我尝试在UTF-8格式下完成了初版页面，但很不幸，所有的中文文字全部变成了乱码。随后在师兄的建议下改为ANSI， 中文显示正常了。但是这并不符合验收标准。所以我又按照网上的资料解释，将格式改成了UTF-8-BOM。问题迎刃而解。

3. 学会了使用em来设置文字尺寸

em的文字尺寸是相对父级尺寸而调整的。使用em调整文字尺寸主要分下面几步：

(1) 在html元素上加上 font-size: 16px; 作为基准文字大小。

(2) 在包含文字的p标签上加上em为单位的 font-size. 例如我使用的是 1.6em。

(3) 在@media下，再次对html元素添加font-size: 10px;作为移动端的新基准文字大小。

通过上面的设置，文字就可以实现在移动端下改变大小的目的了。完成目的后突然想起来，下面两个图标下还有文字忘了设置em字体大小。打开页面改变了一下大小，发现它在没有特殊设置的情况下已经符合文字大小调整的标准了。仔细想了想，这应该是因为em只是调整“倍率”的单位吧。如果不对特定文字作font-size设置，那么它会按照默认的大小基准来确定。而使用 font-size:1.6em 的文字，可以通过变更em的大小，从而达到更改文字大小变更倍率的目的。（目前理解到这里了。。）

明天计划的事情：

1. 开始准备Task4.

遇到的问题：

1. 移动设备的边界是什么？

在阅读了@media的文档 https://www.runoob.com/cssref/css3-pr-mediaquery.html 之后，发现有很多可以界定移动设备的 “媒体功能” 查询条件。例如以下两个：

(1) @media screen and (max-width: 300px)

(2) @media (-webkit-min-device-pixel-ratio: 2)

他们的区别在意一个是以页面的具体宽度界定(300px)， 一个以dpi(dpr)显示清晰度为界定。

不同的移动设备清晰度区别很大，这里有常见的设备dpr表。https://blog.csdn.net/matiascx/article/details/76419371

收获：

上周出差，没学太多的东西，今天有空把Task3的页面完善了一下。