web开发中需要深入理解的知识点

[lampkid]

一次团队分享中讨论的话题点，在此备忘。

topic

1. layout: inline-block（不同div间存在空白-设置父节点font-size为0. vertical-align: top. baseline;
2. media:viewport：了解视口
3. meta：meta用来做什么的？有哪些meta？浏览器是怎么解释meta的
4. dpr
5. 0.5rem： 0.5rem的实现，如何判断当前设备是否支持0.5px
6. rem & image： image使用rem展示会产生什么问题
7. rem & html font-size & body font-size：为什么用rem时要设置body的font-size
8. pix2rem & rem2pix: 开发中如何选用pix和rem，如果互相转化。
9. pageshow/pagehide：如何处理前进/后退事件
10. throttle & debounce
11. 手淘flexible库

参考

https://quirksmode.org/mobile/viewports.html

[lampkid]

以下讨论前提：桌面浏览器

Concept

• Device pixels screen.width/screen.height： 获取的是显示器设备本身的宽高，与浏览器窗口大小无关。使用设备像素描述
• CSS pixels window.innerWidth/window.innerHeight: 获取的是浏览器窗口的宽高，使用CSS像素描述 window.innerWidth/innerHeight获取的宽高包括滚动条。
• viewport 视口宽高：document.documentElement.clientWidth/clientHeight，不包括滚动条的宽高。window.innerWidth包括滚动条的宽高。 一般：body width = html width = viewport width = browser window width != document width
• html width document.documentElement.offsetWidth/offsetHeight

window.pageXOffset/window.pageYOffset:获取document横向或纵向滚动了多少CSS像素。

放大缩小页面，发生了什么？设备像素和CSS像素的关系发生了什么变化。浏览器怎么处理的？

放大缩小页面，pc chrome里window.innerWidth和window.innerHeight并没有变化，可想而知，应该取的设备像素？ window.pageXOffset/pageYOffset在页面放大缩小时实际中也没有发生变化