第二章 媒体查询 支持不同的视口

视口：网页显示内容的窗口
屏幕分辨率：显示器的显示尺寸
一.媒体查询
1.现在多数浏览器都支持媒体查询；

2.定义：指通过查询设备特性：（视口宽度）；——来设置特定的CSS样式

3.具体的CSS写法：
body{background-color:grey;}
@media screen and [max width:960px;]
//如果没提示显示屏并且它的宽度没超过960px
{
body{background-color:red;}
}
常用：国内：(1000px)、768px、550px、320px、国外（960px）；
4.用<link>标签实现媒体查询
(1).<link rel="stylesheet" type="text/css" media="screen"href="screen-style.css"/>

(2).`<link rl="stylesheet" type="text/css"media="screen and (orientation:portrait)" href="portrait=sreen.css">`

(3).`media="not screen and(orientation:portrait)"不是纵屏显示屏的设备`

(4).`media="screen and (orientation:portrait) and(min-width:800px;)"`纵屏显示且宽度大于等于800px

注意：CSS中的写法
@media screen and(orientation:portrait)

@inportant url(“phone.css”)screen and (max-width:360px)

@important url:样式表中导入其他样式
5.媒体查询能检测哪些特性
landscape(屏横向，默认) portraint(纵向)

①.全站下载
②.下载

<meta name="viewport" content="initial-scale=2.0 width:device-width">

width:device-width：按设备宽度的二倍来显示网页

<meta name="viewport" content="width=device-width",maximum-scale=3,inimum-scale="0.5">//网页宽度按设备宽度来显示，能最大放大到原来的3倍，能最小索道原来的0.5倍。

二.第一个响应式设计
1.先构建一个固定宽度的示例网页；

2.阻止移动浏览器的默认缩放。
例：<meta name="viewport" content="initial-scales=1.0,use-scalable:no"/>//禁止用户缩放

<meta name="viewport" content="width=device-width,intial-scale=1.0"/>//网页宽度等于设备宽度，缩放倍数为1倍（即不缩放，手机显示的网页中的内容和电脑显示的内容一致）