viewport和@media查询

一：什么是Viewport?

1. viewport 是用户网页的可视区域。

2. viewport中文翻译为“视区”

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

二：Viewport的作用

用于解决PC页面能在手机上正常显示，不会因屏幕变小而挤压布局导致页面排版混乱的问题。

三：设置Viewport

 name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这段代码的几个参数解释：

• width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

• height：和 width 相对应，指定高度。

• initial-scale：初始的缩放比例（默认设置为1.0）  

• minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

• maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）   

• user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面。no时 minimum-scale 与 maximum-scale 可以不用写） 

四：什么是@media

@media可以根据不同的媒体类型定义不同的样式。

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

 

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

五：@media使用

它有两种使用方式：

1. 直接在link中使用，通过media判断尺寸的大小在引入不同css文件

2. 直接在