「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」
在前端开发中视口是与用户最直接的交流场所，所以开发更适合用户的网页就需要对页面进行更好的美化，那么我们今天就来讲讲视口，响应式布局和 媒体查询。
一.vw视口
在css中，存在视口 vw 表示视口宽度 全名：（viewport width）
- -100vw = 一个视口宽度(一个设计图的宽度)
- -1vw = 一个视口1%宽度
其中这个单位永远参照视口宽度计算，计算如下：
100vw=设计图像素(750px)
1px = 100vw/750px = 0.133333333vw
40px = 0.133333333*40 = 1px*40
在设计中设计视图宽度一般是： 750px 或 1125px
在这里还有一个值：rem 1rem = 1个html 的字体大小。
二.媒体查询
媒体特征： width：视口宽度 height：视口高度
min-width (视口的最小宽度，视口大于这个宽度生效)
max-width (视口的最大宽度，视口小于这个宽度生效)
使用媒体查询： 语法：@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像素）
物理像素和css像素
此电脑默认4:5 物理像素是css像素的1.25倍
可以通过视口改变css像素和物理像素的比值
默认情况下，移动端的像素比是 980/移动端宽度 （980/750）
可以通过 meta 标签来设置视口大小
