css vw视口，响应式布局 及 媒体查询

一.vw视口

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

1. -100vw = 一个视口宽度(一个设计图的宽度)
2. -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;
}
}

视口最小宽度是700px，当视口大于700px是页面颜色变为潮蓝色。

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

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

三.响应式布局

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

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

物理像素和css像素  
        此电脑默认4:5  物理像素是css像素的1.25倍 
        可以通过视口改变css像素和物理像素的比值

        默认情况下，移动端的像素比是  980/移动端宽度  （980/750）
        可以通过 meta 标签来设置视口大小