前端【响应式】开发详细解析
一、响应式设计需要解决的问题是什么？
针对目前大家常见的固定布局、自适应布局都是一种反应迟钝的web设计，当Web页面需要在各种显示屏显示时，他们就显得力不从心了。因此，我们就需要相应设计。
优势：
一个页面适应各种显示屏；
具有良好的SEO；
较大缩短开发周期；
给用户更多的选择，更好的用户体验；
二、响应式包含哪些部分？
在学习响应式设计时，我们需要知道以下几个常见的术语。
1、流体网格
一个简单的网格系统，将每个格子使用百分比单位来控制网格大小，其优势是网格随着屏幕大小作出对于的比例缩放。
2、弹性图片
弹性图片是指不给图片设置固定尺寸，而更具流体网格进行缩放来适应不同的尺寸。实现方法如下代码：
img{
max-width:100%;
}
注：IE8中会使图片不显示，所以需在IE8中增加对于hack样式。
3、CSS3 Media Queries
它是响应式设计最关键的一个应用，它可以根据浏览器窗口的大小、方向、屏幕规格选择对于的样式文件。
4、屏幕分辨率
所谓屏幕分辨率是指：分辨率是1920设备像素*1080设备像素，在纵向上排列了1080个显像用的小点，在横向上排列了1920个显像用的小点，同一尺寸的屏幕下，分辨率越高（横向、纵向上的显像点越多越小）屏幕越清晰。
问题：在高清屏和普通屏下，css的100px展示会不会有差异？
答案是：不会有差异!
在普通的屏幕下1px占用一个设备像素，而在高清屏幕下（如苹果的视网膜屏）1px占用2个设备像素。以iphone6来说物理像素是750 * 1334，因为是高清屏幕，所以用px来度量的话就是 375px * 667px。这个可以在chrome浏览器的调试模式下查看。
5、主要断点
断点是为min-width和max-width服务的。@media (min-width:320px){}
三、One More Thing？
1、自适应布局盒响应式布局区别
自适应布局：就是我们常见的百分比布局，它可以让你的布局在不同分辨率下适应其大小，但这种布局需要一个最小宽度来辅助实现，不然在一定尺寸下，整个布局会乱掉，只不过这种不固定值是%而不是px。
响应式布局：是一个多列流体布局，其利用的是媒体查询来实现web页面在不同分辨率下的完美呈现，和自适应布局还是有本质上的差别。
2、em在响应式设计中的运用
em和font-size优很大关系，它也是css的一个度量单位，不过它比px更适合响应式设计，他能让你的断点根据字号大小来调整其值。
20em = 20 * 16 = 320px
30em = 30 * 16 = 480px
@media only screen and (min-width : 20em) {}
@media only screen and (min-width : 30em) {}
3、常用css单位
常用有三种：px em %
px：浏览器的度量单位，相对于物理像素，1px在高清屏幕下可能占用2个物理像素、甚至3个物理像素。
em：相对于父元素的font-size，如父元素font-size设置为16px，子元素font-size设置为0.75em，那么转换为px就是0.75 * 16px = 12px;
%：相对于父元素的长度高度，position:fixed 、absolute 除外（fixed将相对于窗口、absolute相对于递归父元素知道 第一个设置了position的元素）
rem：相对于根节点(一般为html节点)的font-size，如果html节点设置font-size = 100px，那么文档中的元素设置为0.3rem，则计算为：0.3 * 100px = 30px
vh/vw：相对于设备的可视范围，在移动端中经常会用到，比如：设计师经常要求，banner占满首屏高度既：100vh。如iphone6 （375px * 677px）= (100vw * 100vh) ，而iphone6 plus （414px * 736px） = (100vw * 100vh) 两种屏幕下的vw、vh是不一样的。
clac：css3中的长度计算语法，支持+、-、*、/的计算。
四、响应式设计关键三步
第一步、设置meta标签
使用设备的宽度为视图的宽度，禁止默认的自适应页面的效果，禁止缩放效果。如下：
由于IE6-IE8不支持响应式设计，所以需增加相应插件来支持respond.js或者media-queries.js，如下：
<!--[if lt IE9]>
<script src='http://xxx/response.js'></script>
<![end]-->
第二步、HTML MarkUp
基础一般会包括：头部、导航、内容、页脚。
第三步、媒体查询
1、一般用min-width和max-width来检查各种设备的分辨率大小
@media screen and (min-width : 768px) {}
@media screen and (max-width : 1024px) {}
@media screen and (min-width : 768px) and (max-width : 1024px) {}
2、设备宽度device-width主要用在苹果产品上
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
3、调用独立样式表
常用模板：
1024px显示屏：@media screen and (max-width : 1024px) {}
ipad横屏：@media screen and (max-device-width : 1024px) and (orientation:landscape) {}
ipad竖屏：@media screen and (max-device-width : 768px) and (orientation:portrait) {}
iphone和smartPhone:@media screen and (min-width : 320px) and (max-width : 480px) {}
大屏幕、中屏幕、小屏幕的划分：
小屏幕：<769px；@media only screen and (min-width : 769px) {}
中屏幕：769~1366px或者769~1440px；@media only screen and (min-width : 769px) and (max-width:1366px){}
大屏幕：1366~1920px；@media only screen and (min-width : 1367px) {}
更多视频教程请关注微信公众号！！！！！！！
