响应式布局

一、 什么是响应式设计
1、针对某些设备的某些特征可以由不同的样式，通过媒体查询对页面进行重构。响应式网站是一个设计理念，它是多项技术的综合体。
2、目的是一个网站能够兼容多个终端（电脑、手机、Pad等）设备，不需要为每个终端做不同的版本。采用响应式布局设计的网站能够根据显示屏幕的大小而变化，页面的排版布局可以自动进行调整，以适应不同尺寸的屏幕，从而为用户提供更方便的阅读和交互。响应式布局简单的说就是一套设计在pc端和移动端都可以使用，并都能给用户提供方便的服务。
几种响应式设计的方式
1、bootstrap框架的方式
2、尽量去使用百分比来进行样式宽度的控制，少用甚至不要去使用固定宽高。
3、使用css属性里面的媒体查询来进行元素的控制。
4、使用弹性盒子来进行开发，实现响应式开发。
二、什么是响应式布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
优点和缺点
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
原理：简单点说响应式布局它是通过CSS中Media Query（媒介查询）@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的CSS样式。