本文介绍了CSS中的像素概念，包括CSS像素和物理像素的区别，并详细讲解了视口在不同设备上的应用，特别是在移动端，视口大小对网页显示的影响。同时，文章探讨了移动端的像素比和完美视口的概念，强调了在移动端开发中合理设置视口的重要性。最后，文章通过媒体查询介绍了响应式布局的实现方式和断点设置，以适应不同屏幕尺寸的设备。
目录
一、像素
屏幕是由一个一个发光的小点构成的，这一个一个的小点就是像素
分辨率：1920*1080 说的就是屏幕中小点的数量
在前端开发中像素要分成两种情况讨论：CSS像素和物理像素
物理像素：上述所说的小点点就属于物理像素
CSS像素：编写网页时，我们所用的像素都是CSS像素
浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现，一个CSS像素最终由几个物理像素显示，由浏览器决定。默认情况下在pc端，一个CSS像素 = 一个物理像素
二、视口（viewport）
视口就是屏幕中用来显示网页的区域。
可以通过查看视口的大小，来观察CSS像素和物理像素的比值
默认情况下：
视口宽度：1920px（CSS像素）
1920px（物理像素）
此时，CSS像素和物理像素的比是1：1
放大两倍的情况：
视口宽度：960px（CSS像素）
最低0.47元/天 解锁文章
604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
