携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情
浏览器像素的总结归纳
1.理像素永远没变，盒模型该是多大就是多大
2.视口变化
2.1 视口变了，比如原来浏览器的窗口是1000px，放大后只有500px了。浏览器放大类似于用放大镜观察一只蚂蚁，不管用多高倍的放大镜，蚂蚁永远是那么大，只不过视觉上无法直接看到蚂蚁的整体了，但是蚂蚁的局部信息被放大了。
例如：给元素指定width:100px，浏览器宽度为1000px，此时可以放下10个盒子，但是如果缩放到200%，只能放下5个了。
2.2浏览器中存在两类重要的像素：
- CSS像素
- 物理像素
- dpr=CSS像素/物理像素，放大浏览器窗口时，物理像素不变，CSS像素变大。dpr变大
在100%缩放下，1CSS像素应等于1物理像素
举例：
初始状态： 有4个1像素，缩放为100%的html元素，此时CSS像素与物理像素重叠。
缩小浏览器放大比例，CSS像素开始缩小，这意味着一个物理像素等于多个CSS像素
增加浏览器放大比例，CSS像素开始变大，这意味着一个CSS像素等于多个物理像素
2.3.window.innerwidth和window.innerheight得出的是CSS像素，因此放大浏览器窗口时，可用的浏览器窗口空间会变小
3.视窗：viewport
HTML元素等于浏览器的宽度，其宽度受viewport限制，但viewport不可用CSS属性改变（一般块级元素会占用父元素100%宽度），在PC端它就是为浏览器窗口的宽度高度.注意，这个值不可通过CSS属性设置
document.documenteElement.clientwidth给出了viewport的尺寸
viewport的实际意义在于它能控制html元素的大小（注意不是html根元素，和我们熟知的谷歌浏览器html根元素最小font-size：12px不是一个概念）。
在原理上，<html>的宽度受viewport所限制，<html>元素为viewport宽度的100%。
可以把viewport看成一个窗户，而我们的网页则是后面的景色，网页可以是跑马灯，左右拖动，而窗户是固定的。
4.响应式常用的原理
- 媒体查询：根据页面宽度指定显示样式
- min-width：元素可以比指定值高，但不能再矮了。有一个父盒子father，容纳son1和son2，如果想要两个儿盒子并排显示并且浏览器缩放时不掉，可对father设定min-width=son1.width+son2.width（记得算上边距）
参考资料：www.ianran.cn/?p=58
