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) {