响应式的主要原理是：代码通过媒体查询，判断屏幕的大小，然后按照预先设置好的样式，显示相对应的元素尺寸。

随着技术的发展和移动网站的普及，同时也推动着网站设计师要去重新思考他们的工作成果将如何在不同设备上呈现。想一想，你每天在手机和电脑上浏览网页的时间哪个更长？

什么是响应式设计？

简单说，响应式网站设计是一种允许设计和代码响应设备屏幕大小的方法。这意味着无论你使用的是4英寸安卓手机，iPad mini，还是40英寸的影院级显示器，你都将获得最优秀的浏览体验。

响应式布局的原理是什么?有哪些常见的响应式布局类型？

#1固定的响应式布局

主要结合当前主流终端设备的尺寸，版面宽度可随意调整，并形成多种版面设计模式。页面布局的大小可根据终端设备屏幕大小来确定。这类响应式布局在网站建设中成本相对较低，但也存在一些不足。由于随着科技的发展和因特网技术的不断进步，将会有许多主流设备出现，如果网站不能很好的利用这些变化，则网站的后期运营和维护将比较麻烦。

#2弹性效果的响应式布局

这个类型比第一个布局类型更灵活，因为它是按像素的百分比来调试的，并且首先设置了站点的最大范围。那么站长在建立网站时就可以根据设备的大小来设置。因此，即便互联网技术发展了，或设备更新了，也能适应较长时间。但是这类网站还有一个缺点，就是网站的结构设计要等效，如果要使用其他页面结构，则比较复杂。

#3混合模式下的响应式布局

混合模式下的响应式布局方法，不仅具有上述两种的优点，而且显示效果更加流畅，在像素和比例设计上更具适应性，并能更好地显示网站内容，完美地呈现给用户。