开发者学堂课程【移动 Web 前端开发：响应式开发-设备分类 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8437
响应式开发-设备分类
一、响应式原理
1. CSS3 中的 Media Query(媒介查询)
通过查询 screen 的宽度来指定某个宽度区间的网页布局
过媒体查询可以查询到 screen 的宽度和屏幕，可以指定某一个宽度区间内的网页布局，通过 css 的方法就可以确定当前页面所属的设备在哪个屏幕区间内。
屏幕的属性很多，需要对某一类设备的宽度区间来进行设置，进行适配
2.设计：
超小屏幕设备（移动设备）：768px以下
小屏设备：768px-992px
中等屏幕：992px-1200px
宽屏设备：1200px以上
3.示例图：
768px 是超小屏设备和小屏设备的临界点
768px 宽度区间以下的为超小屏设备
992px 是小屏设备和中屏设备的临界点
768px-992px宽度区间的为小屏设备
1200px 是中屏设备和大屏设备的临界值
992px-1200px 宽度区间的为中屏设备（老式台式电脑）
1200px宽度区间以上的为大屏设备（笔记本 宽屏显示器）
使用此示意图，将不同设备的宽度区间进行分类
使用媒体查询，查询到不同的区间且根据不同的区间去更改网页的布局通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。
