响应式布局 @media

响应式布局

响应式和移动端都可以实现 大屏和小屏的适配，但不同的是
移动端 是做了两个网页，一个pc端的，一个移动端的
而响应式布局是同一个网页，网页可以根据不通的设备或窗口大小呈现出不同的效果
使用响应式布局，可以使一个网页适用于所有设备

虽然在体验上 响应式 没有 移动端的那么好，但也多提供了一个选择

响应布局的关键就是 媒体查询
通过媒体查询，可以为不通的设备，或设备不同状态来分别设置样式

媒体查询

1）设置meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0,maxium-scale=1.0,user-scaleable=no">

说明：
以上标签的内容只能被移动设备识别。
viewport：视口（移动端）。
width=device-width：宽度等于当前设备的宽度。
initial-scale=1.0：初始缩放比例（默认为1.0）
minimum-scale=1.0：允许用户缩放到的最小比例（默认为1.0）
maximum-scale=1.0：允许用户缩放到的最大比例（默认为1.0）
user-scaleable=no：用户是否可以手动缩放（默认为no）

2）设置IE渲染方式默认为最高版本

<meta http-equiv="x-ua-compatible" content="IE=Edge,chrome=1">

说明：
以上代码表示如果浏览器有chrome插件，将以chrome提供的V8引擎渲染页面；如果没有，将以IE
的最高版本渲染页面。

3）引入兼容的JS文件

<!-- [if lt IE 9]>
<script src="https://oss.maxcdn.cm/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.cm/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif] -->

说明：
因为IE8及IE8以下版本既不支持html5，也不支持CSS3 Media，所以我们需要加载JS文件来处理这个兼容。
上面的代码是一个注释语句，也就是说，IE9及以上的版本不会编译这几行代码。

进入CSS3提供的媒体查询

a）引入外部CSS文件时使用

<link rel="stylesheet" href="css/screen480.css" media="screen and (max-width:480px)" >

如果屏宽为480px及以下，将加载screen480.css文件。

<link rel="stylesheet" href="css/screen800.css" media="screen and (min-width:480px) and (max-width:800px)" >

如果屏宽为480px以上且在800px以下，将加载screen800.css文件。

<link rel="stylesheet" href="css/screengt800.css" media="screen and (min-width:800px)" >

如果屏宽为800px以上，将加载screengt800.css文件。

设备：

1. all 所有设备
2. screen PC端显示器
3. print 打印机或打印预览图
4. handheld`便携设备
5. tv 电视
6. speech 音频合成器
7. braille 盲人点触设备
8. embossed 盲人打印机
9. projection 投影设备
10. tty 固定密度字母栅格设备
11. only 用来排除不支持媒体查询的浏览器

b）在style标签中用@media定义

@media 查询设备 {}

可以使用 , 连接多个媒体类型，这样它们之间就是一个或的关系

可以在媒体类型前添加一个 only，表示只有
only 的使用主要是为了兼容一些老版本浏览器

/* @media print,screen{
    body{
    	background-color: #bfa;
    }
} */

@media only screen {
    body{
        background-color: #bfa;
    }
}

媒体特性

​ 媒体特性：

• width 视口的宽度

• height 视口的高度

• min-width 视口的最小宽度（视口大于指定宽度时生效）

• max-width 视口的最大宽度（视口小于指定宽度时生效）

样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化

一般比较常用的断点：

1. 小于768 超小屏幕 max-width=768px
2. 大于768 小屏幕 min-width=768px
3. 大于992 中型屏幕 min-width=992px
4. 大于1200 大屏幕 min-width=1200px

@media 后跟多个媒体特性时，, 是或，and 是与，还有一种是 not 对后面整体取反，但不常用

/* 常用格式 */
@media only screen and (min-width: 500px) and (max-width:700px){
    /* 只对屏幕小于700px 大于500px 时的设置 */
    body{
        background-color: #bfa;
    }
}

/* 或者这样 */
@media only screen{
    @media (min-width: 500px) and (max-width:700px){
        body{
            background-color: #bfa;
        }
    }
}