什么是响应式布局
响应式就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式
如何适配各种浏览器
从最简单的‘基本’做起，再逐步扩充，即渐进增强，这是比较简单的做法，而优雅降级则麻烦很多。
基本是相对的，首先要确定平台，如果有较多用户再用IE9，那么得考虑IE9的基础，它支持什么特性，
如果用户多是Android2，那么也要考虑类似的问题，不同平台的'基础'体验是相差很大的。
如果浏览器的开发成本超过了浏览器的用户创造的收益，那么就不为该浏览器开发特殊的版本
响应式的一些方法
- 图片
img{
/*最大只可以自身那么大*/
max- 100%;
}
如果把图片设置成100%，那么图片宽度就是父级的宽度，如果父级宽度比图片本身宽，那么图片就会被拉伸
但单独设置max-width有些弊端，如果视口宽度过大，图片仍然会被拉伸，这时需要利用媒体查询
媒体查询
媒体查询在媒体满足某一特定的条件下，改变布局，值得注意的是媒体查询的断点应该跟流行的设备无关
断点，就是某个宽度的临界点，断点应由内容和设计本身决定
例子，尝试改变浏览器大小试试效果
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body{
background: grey;
}
@media screen and (min- 320px){
body{
background: green;
}
}
@media screen and (min- 550px){
body{
background: yellow;
}
}
@media screen and (min- 768px){
body{
background: orange;
}
}
@media screen and (min- 960px){
body{
background: red;
}
}
</style>
</head>
<body>
</body>
</html>
<link media="screen and (orientation: portrait) and (min- 800px), projection />
媒体查询可以用上and, not, or等关键词进行判断
逗号分隔的是每个不同的媒体，projection（投影机），没说明具体特性，表示任何投影机
看了这么多，也是时候具体了解下媒体查询了
语法：
@media 媒体类型 and (设备特性) {样式代码}
设备类型
| all | 所有设备 |
|---|---|
| screen | 电脑显示器 |
| 打印用纸或打印预览视图 | |
| handheld | 便携设备 |
| tv | 电视机类型的设备 |
| speech | 语音和音频合成器 |
| braille | 盲人用点字法触觉回馈设备 |
| embossed | 盲文打印机 |
| projection | 各种投影设备 |
| tty | 使用固定密度字母栅格的媒介，如电传打字机和终端 |
设备特性
- width 视口宽度
- height 视口高度
- device-width 渲染表面的宽度，即设备屏幕的宽度
- device-height 渲染表面的高度，即设备屏幕的高度
- orientation 设备方向是水平还是垂直
- aspect-ratio 视口的宽高比，16:4 -> aspect-ratio: 16/4
- color 颜色组分的位深，min-color -> 设备至少支持16位深
- color-index 设备颜色查找表的条目数，值必须是数值，且不能为负
- monochrome 单色帧缓冲中表示每个像素的位数，值必须是整数，不能为负
- resolution 屏幕或打印分辨率
- scan 针对电视的逐行扫描和隔行扫描, progressive 逐行；interlace 隔行
- grid 设备基于栅格还是位图
响应式小小小案例
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
color: #fff;
}
header,footer{
min-height: 3.75rem;
background: #000;
}
nav{
position: relative;
}
nav ul{
background: skyblue;
min-height: 3.75rem;
line-height: 3.75rem;
list-style: none;
}
.menu{
background: skyblue;
min-height: 3.75rem;
line-height: 3.75rem;
list-style: none;
100%;
flex-direction: column;
position: absolute;
z-index: 1000;
}
.hidden{
display: none;
}
li{
padding: 0 1rem;
}
li:hover{
background: brown;
cursor: pointer;
}
.flex{
display: flex;
}
.justify-content{
justify-content: space-around;
}
main{
min-height: 28.9375rem;
background: brown;
}
aside{
min-height: 25rem;
background: #546358;
flex: 1;
}
aside ul{
flex-direction: column;
flex: 1;
}
aside ul li{
height: 1.875rem;
line-height: 1.875rem;
margin: 1rem 0;
}
section{
flex: 6;
}
article{
min-height: 400px;
100;
background: #754358;
}
/*根据需要隐藏显示类*/
@media screen and (max- 1366px){
.max-1008-display-none{
display: block;
}
.max-768-none{
display: none;
}
}
@media screen and (max- 992px){
.max-1008-display-none{
display: none;
}
.max-768-none{
display: none;
}
}
@media screen and (max- 768px){
.max-768-none{
display: block;
}
}
</style>
</head>
<body>
<header>
<h1>响应式网页</h1>
<nav>
<ul class="flex menu max-768-none" id="menu">
<li id="caidan">菜单</li>
<li class="hidden">导航1</li>
<li class="hidden">导航1</li>
<li class="hidden">导航1</li>
<li class="hidden">导航1</li>
<li class="hidden">导航1</li>
</ul>
</nav>
<nav>
<ul class="flex justify-content">
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
</ul>
</nav>
</header>
<main class="flex">
<aside class="max-1008-display-none">
<ul class="flex">
<li>项目1</li>
<li>项目1</li>
<li>项目1</li>
<li>项目1</li>
<li>项目1</li>
<li>项目1</li>
<li>项目1</li>
</ul>
</aside>
<section>
<h2>主体内容</h2>
<article>
</article>
</section>
</main>
<footer></footer>
<script type="text/javascript">
let caidan = document.getElementById('caidan');
let menu = document.getElementById('menu');
caidan.onmouseenter = function(){
let hiddens = document.getElementsByClassName('hidden');
for(let i = 0; i<hiddens.length; ++i){
hiddens[i].style.display = "block";
}
}
menu.onmouseleave = function(){
let hiddens = document.getElementsByClassName('hidden');
for(let i = 0; i<hiddens.length; ++i){
hiddens[i].style.display = "none";
}
}
</script>
</body>
</html>