目录
- 🌟前言
- 🌟优点
- 🌟缺点
- 🌟@media兼容性
- [🌟利用CSS3-Media Query实现响应式布局](#🌟利用CSS3-Media Query实现响应式布局)
- 🌟常见的媒体类型
- 🌟常见的操作符
- 🌟属性值
- 🌟设备检测
- 🌟响应式阈值选取
- 🌟简单案例查看
- 🌟写在最后
🌟前言
现在很流行的一个设计理念，随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果，设计师提出了响应式布局的设计方案。所谓的响应式布局，就是一个网站能够兼容多个终端------而不是为每个终端做一个特定的版本。也就说一个页面可以在多个终端呈现出你想要的效果，能够兼容各个终端。
🌟优点
- 面对不同分辨率设备灵活性强
- 能够快捷解决多设备显示适应问题
- 根据不同的显示器调整设计最适合用户浏览习惯的页面
🌟缺点
- 兼容各种设备工作量大，效率低下
- 代码累赘，会出现隐藏无用的元素，加载时间加长
- 其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果
- 因为要适应不同的设备，页面的结构可能会有所不同，会导致页面的辨识度不强
🌟@media兼容性
ie8及以下不支持 @media
Respond.js可帮助IE6-8兼容 "min/max-width" 媒体查询条件: Respond.js
使用方法：在页面中所有css文件的引用位置之后引用Respond.js。而且Respond.js的引用得越早，用户看到页面闪烁的机会越小。
🌟利用CSS3-Media Query实现响应式布局
- media query:
通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件
- 语法结构及用法:
@media设备名 only (选取条件) not (选取条件) and(设备选取条件)，设备二{sRules}
- 在link中使用@media
- screen：指的是一种媒体类型；
- and：被称为关键词，与其相似的还有not,only。可能的操作符
- max-width:600px这个就是属性值，媒体特性，也就是就是媒体条件。
html
<link rel="stylesheet" type="text/css" media="screen and (max-width: 600px)"href="link.css"/>- 在样式表中内嵌 @media
css
@media screen and (max-width: 600px) {
选择器 {
属性：属性值；
}
}🌟常见的媒体类型
| 值 | 描述 |
|---|---|
| all | 默认。适用于所有设备。 |
| 打印预览模式/打印页。 | |
| screen | 计算机屏幕。 |
🌟常见的操作符
| 值 | 描述 |
|---|---|
| and | 逻辑与，连接设备名与选择条件、选择条件1与选择条件2。 |
| not | 排除某种设备 |
| only | 限定某种设备类型 |
| , | 设备列表 |
🌟属性值
| 媒体特性 | 值 | 可用媒体类型 | 接受min/max | 简介 |
|---|---|---|---|---|
| width | <length> |
视觉屏幕/触摸设备 | yes | 定义输出设备中的页面可见区域宽度(单位一般为px) |
| heigth | <length> |
视觉屏幕/触摸设备 | yes | 定义输出设备中的页面可见区域高度(单位一般为px) |
| device-width | <length> |
视觉屏幕/触摸设备 | yes | 定义输出设备的屏幕可见宽度(单位一般为px) |
| device-heigth | <length> |
视觉屏幕/触摸设备 | yes | 定义输出设备的屏幕可见高度(单位一般为px) |
| orientation | portrait /landscape |
位图介质类型 | no | 定义'height'是否大于或等于'width'。值portrait代表是，landscape代表否即设，备手持方向：portait为横向，landscape为竖向 |
| aspect-ratio | <ratio> |
位图介质类型 | yes | 定义'width'与'height'的比率，即浏览器的长宽比 |
| device-aspect-ratio | <ratio> |
位图介质类型 | yes | 定义'device-width'与'device-height'的比率，即设备屏幕长宽比。如常见的显示器比率：4/3， 16/9，16/10 |
| color | <integer> |
视觉媒体 | yes | 定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0 |
| color-index | <integer> |
视觉媒体 | yes | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 |
| monochrome | <integer> |
视觉媒体 | yes | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 |
| resolution | <resolution> |
位图介质类型 | yes | 定义设备的分辨率。如：96dpi，300dpi，118dpcm |
| scan | progressive / interlace |
电视类 | no | 定义电视类设备的扫描工序， progressive逐行扫描，interlace隔行扫描 |
| grid | <integer> |
栅格设备 | no | 用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否 |
🌟设备检测
- Phone
html
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone.css" />- iPad
html
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" />- android
html
/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />🌟响应式阈值选取
响应式的阈值即不同设备宽度的临界值，该值由当前市面上设备分辨率比例得出，详见Statcounter：
| 阈值 | 内宽 | 设备 | 描述 |
|---|---|---|---|
| <768px | auto | 手机 | 超小屏幕 |
| ≥768px | 750px | 平板 | 小屏幕 |
| ≥992px | 970px | 桌面显示器 | 中等屏幕 |
| ≥1200px | 1170px | 大桌面显示器 | 大屏幕 |
🌟简单案例查看
F12打开控制台，控制台置与浏览器右侧，拖动观察页面变化
案例一：StatCounter Global Stats - Screen Resolution Market Share
案例二：苹果官方
案例三：Bootstrap
🌟写在最后
更多前端知识请大家持续关注，尽请期待。各位小伙伴让我们 let's be prepared at all times！
✨原创不易，还希望各位大佬支持一下！
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！