- 响应式布局原理
- 媒体查询应用
- 响应式布局示例
- 外部样式的引入方式
一、响应式布局原理
1.1响应式布局特点：网页宽度自动调整、尽量少使用绝对宽度、字体的大小使用相对单位（rem、em）、布局尽量使用浮动（流式布局）。
1.2响应式布局核心技术：媒体查询（@media）。
@media是css的@规则语句：@ + 标识符
关于css的@规则可以参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/At-rule
更严谨的说@media是嵌套@规则，如果满足@media的媒介查询条件，则条件规则组里面的规则生效。通俗的解释就是当显示器的条件满足@media的某一个样式，就是用该条件下的css样式。
@media查询条件分为两种，一种是媒体类型，一种是媒体特性。（详细可以参考：http://css.doyoe.com/ --> 语法与规则 --> @media）
1 /* 媒体查询语法 */ 2 @media 媒体类型 { 3 /* css样式 */ 4 } 5 @media 媒体特性 { 6 /* css样式 */ 7 } 8 @media 媒体类型 and 媒体特性 { 9 /* css样式 */ 10 } 11 @import url('xxx.css') 媒体特性;
1.3媒体类型：
| all | 所有设备。 |
| 打印设备。 | |
| screen | 彩色的电脑屏幕。 |
| speech | 听觉设备，应用于屏幕阅读器等发声设备。 |
1.4媒体特性（这部分内容比较多，这里列举一些响应式布局可能用到的特性，详细内容可以参考：https://www.runoob.com/cssref/css3-pr-mediaquery.html）：
更详细的媒体查询解析文档可以看这个：https://drafts.csswg.org/mediaqueries/
| width | 宽度：页面的可见宽度。 |
| height | 高度：页面的可见高度。 |
| min-width、max-width | 最小宽度、最大宽度：页面的可见最小或最大宽度。 |
| min-height、max-height | 最小高度、最大高度：页面的可见最小或最大高度。 |
| orientation | 方向：页面可见区域高度是否大于或等于宽度。取值：landscape宽度大于高度（横屏）；portrait高度大于宽度（竖屏）。 |
| aspect-ratio | 宽高比 |
| -webkit-device-pixel-ratio | 像素比（webkit内核私有的属性） |
1.5逻辑运算符：
| and | 合并多个媒体类型（并且的意思） |
| , | 酦醅某个媒体查询（或者的意思） |
| not | 对媒体查询结果取反，不能单独使用（比如不能单独取all的反），也就是说对整体媒体查询结果取反。 |
| only | 仅在媒体查询匹配成功后应用样式（防范老旧浏览器），这逻辑运算符主要用于解决老旧浏览器不能解析@media而直接将媒体查询作为普通样式直接作用。 |
示例1：
1 /* 所有设备、宽度必须大于700、横屏，这个三个条件同时满足才为true */ 2 @media all and (min-width:700px) and (orientation:landscape){ 3 /* 注意这里我遇到了选择器权重的问题，所以在媒体查询样式选择器添加了一个media类 */ 4 div.media{ 5 background-color: yellow; 6 } 7 } 8 div{ 9 width: 200px; 10 height: 200px; 11 background-color: red; 12 }
示例2：
/* 所有设备、宽度必须大于800或者竖屏的时候，true */ @media all and (min-width:800px),(orientation:portrait){ div.media{ background-color: yellow; } }
示例3：
//对示例2的整个媒体查询取反 @media not all and (min-width:800px),(orientation:portrait){ div.media{ background-color: yellow; } }
最后强调一下，@media是css3的功能，在来旧浏览器中会直接将媒体查询内的样式直接解析出来，为了防止这种情况，可以使用only解决，虽然现在的浏览器普片都能使用css3的语法了，但如果需要非常严谨的处理一些样式的话，还是需要用到only。
二、媒体查询应用
//html <div class="media"></div> //css div{ padding: 50px 0; border: 1px solid #000000; } div::after{ content: "这是一个房子"; } @media all and (max-width:1000px){ div.media{ background-color: #1177bb; } div.media::after{ content: "哇，好大的房子"; } } @media all and (max-width:800px){ div.media::after{ background-color: #aeaeae; } div.media::after{ content: "喔，房子变小了"; } } @media all and (max-width:500px){ div.media{ background-color: #46ae46; } div.media::after{ content: "哎，房子更小了"; } }
三、响应式布局示例
1.github链接（含图片）：https://github.com/SnowElves/mediaLayout
2.代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title></title> 7 <meta name="description" content=""> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 <link rel="stylesheet" href="index.css"> 10 </head> 11 <body> 12 <div class="overall"> 13 <!-- 头部 --> 14 <ul class="headNav media"> 15 <li class="logo"><a href="https://baidu.com" target="_blank"></a></li> 16 <li class="search"> 17 <input type="text" placeholder="请输入搜索内容"> 18 </li> 19 <li class="title"> 20 <a href="#">HTML</a> 21 <a href="#">CSS</a> 22 <a href="#">JavaScript</a> 23 <a href="#">ES6</a> 24 <a href="#">Node</a> 25 </li> 26 <li class="userInfo"> 27 <div class="imgUser"> 28 <img src="./image/user.png" alt=""> 29 </div> 30 <div class="text">他乡踏雪</div> 31 <div class="imgList"> 32 <img src="./image/userList.png" alt=""> 33 </div> 34 </li> 35 <li class="leftNavIocn"><img src="./image/leftNavIocn.png" alt=""></li> 36 </ul> 37 </div> 38 </body> 39 </html>