开发者学堂课程【移动 Web 前端开发：】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8438
响应式开发-媒体查询&原理
一、媒体查询原理及示例
响应式的原理是什么？
要求：
1. CSS3 中的 Media Query（媒介查询）
2.通过查询 screen 的宽度来指定某个宽度区间的网页布局。
3.超小屏幕（移动设备） 768px以下
4.小屏设备 768px-992px
5.中等屏幕 992px-1200px
6.宽屏设备 1200px以上
示例代码：
//版型容器在切块的时候无法实现自适应
<！DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>媒体查询</title>
<style>
body{
margin: 0;
padding: 0;
}
.container{
width: 1200px;
height: 1200px;
background : red;
margin: 0 auto;
}
/*大屏设备 1200px以上 */
/*版心容器 宽变成1170px 背景颜色 黄色*/ //当前需求
@media screen and(min-width:1200px){ // media 的作用：媒体查询，媒体查询的种类有很多。
//查询屏幕的最小宽度是1200px
.container{
//可以编写属性，也可以编写正常的 css 样式
width:1170px;
background:yellow;
//此代码生效则编写的样式也会生效
}
}
效果展示：
//通过媒体查询，使得上方样式生效，将下方效果覆盖。媒体查询的意义：在某个宽度区间内，样式生效覆盖掉之前的样式，达到样式修改的目的，通过媒体查询指定某个区间，样式才会生效。
/*中屏设备 992px-1200px； */
/*版心容器 宽变成 970px 背景颜色 绿色 */
@media screen and(min-width:992px) and (max-width:1200px){ //为了避免条件与之前编写的条件所重合，需要添加一个新的条件
.container{
width:970px;
background:green;
}
}
//通过媒体查询指定一个某个屏幕区间来单独设置网页布局和样式。
/*小屏设备 768px-992px */
/*版心容器 宽变成970px 背景颜色 蓝色 */
@media screen and(min-width:768px) and (max-width:992px){
.container{
width:750px;
background:blue;
}
/*超小屏设备 768px以下 */
/*版心容器 宽变成100% 背景颜色 紫色 */
@media screen and(max-width:768px) {
.container{
width:100%;
background:purple;
}
}
//版心容器能够分别自适应大屏设备、中屏设备、小屏设备、超小屏设备，就表示一条页面的版心可以适配多种终端
//完成此需求便达到了通过查询screen的宽度来指定某个宽度区间的网页布局的目的。
//一个容器可以适配多种屏幕，此页面的版心容器能够适配多种终端
/* 媒体查询 */
/*语法：关键字 查询的屏幕 条件为 and 衔接 必须使用空格（条件）
@media screen and(min-width:1200px){
可以写 css 样式 选择器（属性）
</style>
</head>
<body>
<div class =”container”></div> //设置一个固定宽度
</body>
</html>
//通过媒体查询来查询到不同的终端类型，根据不同的终端类型制作不同的网络布局和内容。
什么是响应式布局？（What is respond layout？）
1.在移动互联日益成熟的时候，在桌面浏览器上开发的网页已经无法满足移动设备的阅读
2.通常的做法是针对移动端单独做一套特定的版本
3.如果终端越来越多，那么需要开发的版本将越来越多（大屏移动设备普及）。
4.Ethan Marcotte 在2010年5月提出的概念，一个网站能够兼容多个终端。
响应式布局主要是为了让网页在不同显示设备上以合适的方式显示而出现的一种设计思路。通常来说电脑的显示屏较大，大多都是横屏显示的；手机的显示屏比较小，通常都是竖屏使用的。如果只有一套UI显示的话体验上往往难以兼顾两者，这时可以使用响应式布局。对于小型的网页项目,目前常见的响应式布局通常是利用 媒体查询 结合 meta 标签的 viewport 属性 来实现.
@media 查询条件 {
CSS-Code;
}
/* 查询条件可以是媒体类型或是媒体特性 */
/* 也可以是由 and、not、only、or 修饰组合而成的短语 */
/* 多个条件也可以用 ，（逗号）连接，相当于 or */
/* 媒体特性需要用圆括号包围 */
