KFE 第40期

一周推荐

最近开始用VSCode，总体感觉不错，虽然没有sublime Text各种快捷键，但是IDE的集成不错，尤其是终端的集成

VSCode

不同的移动布局方案适合不同的场景，正如作者总结的，现在移动站已经开始普遍使用rem，而有大量CSS3动画这适合设置viewport

移动布局

近期刚好也有遇到这样的需求，mark

native app

奇技淫巧，有木有

CSS 波浪效果

新的 Audits 面板基于 Lighthouse , 它提供了一套全面的测试来评估网页的质量。测试的类别分别是性能、可访问性、最佳实践和 PWA（Progressive Web Apps）。

Chrome DevTool

什么是 rem?

顾名思义就是以根元素(root)为参照物的 em 单位

根据 W3C 规范中对 1rem 的定义：

1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时，rem 单位以该属性的初始值作参照。

这就意味着 1rem 等于 html 元素的字体大小（大部分浏览器根元素的字体大小为16px）

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem

但是这种计算是十分麻烦的，于是就有了Snook 的62.5

因为 rem 单位与根元素相关联，Snook 改进后的方案变为了：

1
2
3

html { font-size: 62.5%; }  /* =10px */
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

1 2	1像素边框问题？由于不同手机的像素密度不同，所以css中1px不等于移动设备的1px

女秘帮老总设置计算机，询问老总想用什么词做为登陆系统的密码，老总坏笑地告诉女秘输入Penis，女秘一言不发，直接输入，结果电脑显示：Password rejected. Not long enough.

老总晕倒，女秘书笑翻。

文章整理来自互联网，不作商业用途，如侵权，请联系删除