viewport 和 @media 媒体查询

viewport：视口，视觉窗口，显示区域。

概念网上有很多了，一般来说常用的就是这一段代码：

<meta name="viewport" content= "initial-scale=1,maximum-scale=1,user-scalable=no">

最好也加上这句：

<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">

@media 媒体查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

例如：

@media screen and (min-aspect-ratio:1/1) and (max-height:440px){...}

min-aspect-ratio当输出设备中的页面可见宽度与高度比率大于或等于1:1时。

@media screen and (min-aspect-ratio:1/1) and (orientation: landscape){...}

上面这段是设置横屏下的样式。

x vw = x% * (viewport width)

x vh = x% * (viewport height)