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)
推荐阅读：
