第一篇博客
1.什么是响应式设计？
让一个网站可以兼容不同分辨率的设备。
给用户更好的视觉使用体验。
2.诞生背景
在智能手机还未普及之前，平板电脑之类的终端更没有普及，我们所浏览的网页大多都是通过电脑，所以开发者只需要顾及浏览器上页面的正常显示即可，对于缩放浏览器的尺寸而造成的页面效果显示失常往往也不会在考虑范围之类。移动互联网的诞生，多种移动互联网终端也随即产生，开发者就不得不通过研发新的技术来使得网页在多个终端上显示都有很好的并且正常的效果。也就是说，移动互联网的诞生促进了响应式设计的诞生。
3.如何实现响应式布局？
1） CSS3——Media Query（媒体查询）：最简单的方式
2） 借助原生JavaScript：通过JS获取设备屏幕的宽高来设置不同的CSS样式，成本高，不推荐使用
3） 第三方开源框架：可以很好的去支持浏览器响应式布局的设计，比如Bootstrap，其核心使用的技术也是CSS3的媒体查询。
4.视区的概念
4.1 ViewPort
ViewPort（视区），是用户网页的可视区域，手机浏览器是把页面放到一个虚拟的“窗口”（ViewPort）中，通常这个虚拟的“窗口”比屏幕宽，这样就不用把每个页面挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移或缩放来看网页的不同部分。
4.2 设置ViewPort
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
1）width：viewport的宽度
2）height：viewport的高度
3）initial-scale：加载时的初始缩放比例
4）maximum-scale：最大缩放比例
5）minimum-scale：最小缩放比例
6）user-scalable：用户是否可以收到缩放
4.3 设置ViewPort前后对比
设置前.png
设置后.png
在未设置ViewPort之前，设备会按照虚拟的“视口”来处理，所以文字和图片都会按照虚拟“视口”的尺寸来显示，于是就造成了文字在手机设备上看不清晰的情况。
5.媒体查询技术
5.1 link方式：在link引入时根据浏览器大小引入不同的css文件
<link rel="stylesheet" type="text/css" media="only screen and (max-width:480px)" href="styles/media.1.blue.css"> <link rel="stylesheet" type="text/css" media="only screen and (min-width:481px)" href="styles/media.1.red.css"/>
5.2 css方式：引入相同的css文件，但是在css文件中对不同尺寸做出区分
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>媒体查询-css方式</title>
<style type="text/css">
@media only screen and (max-width: 480px)
{ body{ background-color: blue;
}
}
@media only screen and (min-width: 481px)
{ body{ background-color: red;
}
} </style></head><body></body></html>5.3 设置断点
BootStrap是严格遵照响应式设计来开发的，首先可以参考BootStrap的端点设置，如下图所示。
1.超小屏幕 小于768px 2.小屏幕 大于等于768px
3.中等屏幕 小于992px 4.大屏幕 大于等于1200px
bootstrap断点设置.png
5.4 Chorme开发工具
打开Chorme浏览器，输入https://www.baidu.com，键盘上F12（或Fn+F12),键盘上F5（或Fn+F5），进行页面刷新，这个时候就可以看到移动端的百度页面。
百度移动端.png
因为在开发当中，屏幕的宽度是占据主导作用的，所以在这个工具之下，我们通过调节不同设备来查看常见的移动终端的设备宽度，这样也可以作为媒体查询的端点设置。
调节工具.png
比如：
iPhone/6/7/8宽度为375px
iPad宽度为768px
......
6.响应式图片
6.1 不同设备显示不同的图片：适用于设置背景图片
大尺寸图片可以显示在大屏幕上，但在小屏幕上确不能很好显示。我们没有必要在小屏幕上去加载大图片，这样很影响加载速度。所以我们可以使用媒体查询，根据不同的设备显示不同的图片。这样也就意味着在设计网页的时候要为不同的设备制作不同尺寸的图片。
.banner{ background-image: url(images/1920.jpg) center top no-repeat; height: 500px;
}
@media (max-width: 767px)
{ .banner{ background-image:url(images/768.jpg); height: 600px;
}
}
@media (min-width: 768px)
{ .banner{ background-image: url(images/1200.jpg)
height: 500px;
}
}
@media (min-width: 1200px)
{ .banner{ background-image: url(images/1920.jpg)
height: 500px;
}6.2 picture元素
<picture> 元素类似于 <video> 和 <audio> 元素。可以设备不同的资源，第一个设置的资源为首选使用的，对于不支持 <picture> 元素的浏览器你也可以定义 <img> 元素来替代。（IE浏览器和Opera浏览器不支持该元素）
<picture> <source media="(min-width:1200px)" srcset="images/1200.jpg"> <source media="(max-width:768px)" srcset="images/768.jpg"> <img src="images/1200.jpg"></picture>
7.制作简单的响应式布局
layout.1.html
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=1.0"> <meta charset="utf-8"> <title>响应式布局</title> <link rel="stylesheet" type="text/css" href="styles/layout.1.css"></head><body> <header> <div class="logo"></div> <nav class="nav"></nav> </header> <div class="banner"></div> <div class="show"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="news"> <div class="vedio"></div> <div class="list"></div> </div> <footer></footer></body></html>
layout.1.css
*{ padding:0; margin:0;
}header{ width:1000px; margin:0 auto; background: green; margin-bottom: 10px;
}header:after{ content:""; display: block; clear:both;
}header .logo{ width:20%; height: 100px; background: red; float: left;
}header .nav{ width:70%; height: 100px; background: #eee; float: right;
}.banner{ width:100%; height:400px; background-color: yellow; margin-bottom: 10px;
}.show{ width:1000px; margin:0 auto; background-color: green; margin-bottom: 10px;
}.show:after{ display: block; content: ""; clear:both;
}.show .box{ width: 240px; height:200px; background: blue; float: left; margin: 5px 5px;
}.news{ width: 1000px; margin:0 auto; margin-bottom: 10px;
}.news:after{ display: block; content:""; clear:both;
}.news .vedio{ width:495px; height:300px; background-color: #069; float: left;
}.news .list{ width: 495px; height: 300px; background-color: #f60; float: right;
}footer{ width: 100%; height: 100px; background-color: #333;
}
@media (max-width:767px)
{ header{ width:100%;
} .show{ width: 100%;
} .show .box{ margin: 0.5%; width:49%;
} .news{ width:100%;
} .news .vedio{ width: 100%
} .news .list{ width: 100%;
}
}
@media (min-width: 768px)
{ header{ width:100%;
} .show{ width: 80%;
} .show .box{ margin: 0.5%; width:49%;
} .news{ width:100%;
} .news .vedio{ width:49.5%;
} .news .list{ width:49.5%;
}
}
@media (min-width: 1000px)
{ header{ width:1000px;
} .show{ width: 1000px;
} .show .box{ margin:0px 5px; width:240px;
} .news{ width:1000px;
} .news .vedio{ width:495px;
} .news .list{ width:495px;
}
}可以将代码COPY到自己本地，使用浏览器进行查看，然后调整浏览器的尺寸，查看页面布局的变化，这样就实现了响应式设计的第一步。
作者：瑾瑜爱上猫
链接：https://www.jianshu.com/p/9268170d5b79
随时随地看视频
