「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」

在前端开发中视口是与用户最直接的交流场所，所以开发更适合用户的网页就需要对页面进行更好的美化，那么我们今天就来讲讲视口，响应式布局和 媒体查询。

在css中，存在视口 vw 表示视口宽度 全名：（viewport width）

其中这个单位永远参照视口宽度计算，计算如下：

在设计中设计视图宽度一般是： 750px 或 1125px

在这里还有一个值：rem 1rem = 1个html 的字体大小。

媒体特征： width：视口宽度 height：视口高度

使用媒体查询： 语法：@media 查询规则{} 媒体类型： all 所有类型 print 打印设备 screen 带屏幕的设备 speech 屏幕阅读阅器

为了适配一些老版本的浏览器，我们通常需要在媒体类型前前面加上 only

如下实例： 现在我们来创建一个响应式布局，要求在视口宽度大于700px是视口背景颜色改变。

@media (min-width:700px) { body{ background-color: aqua; } }

min-width:700px 规定视口最小宽度是700px，当视口大于700px时页面颜色变为潮蓝色。

2.1 断点 样式切割的分界点，我们称其为断点，也就是网页的样式会在这个点发生变化

常用断点： 小于 768 超小屏幕 max-width：768px 大于 768 小屏幕 min-width：768px 大于 992 中型屏幕 min-width：992px 大于 1200 大屏幕 mix-width：1200px

在现实生活中往往有很多大小不一样发设备屏幕，那么我们在设计网页时就要考虑到这个事情，为了给不同的用户更好的甜言，开发中我们就需要使用响应式布局，来满足不同大小页面的要求。

响应式布局的用途： 1.媒体可以根据不同的设备或窗口大小呈现不同的效果 2.使用响应式布局可以使网页适应所有设备 3.相应布局的关键就是 媒体查询 4.通过媒体查询可以为不同设备或设备不同状态来设置样式

在前端中我们还需要了解一个属性就是像素：（物理像素）和 （css像素）