什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
响应式设计简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
优点
- 面对不同分辨率设备灵活性强
- 能够快捷解决多设备显示适应问题
缺点
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
【通过这三个步骤，你一定可以了解响应式设计的基本原理和media query】
第一步. Meta 标签
为了适应屏幕，多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。你可以使用meta标签的viewport属性来设置。下面的代码告诉浏览器使用设备屏幕宽度作为内容的宽度，并且忽视初始的宽度设置。这段代码写在 <head>里面
<meta name="viewport" content="width=device-width, initial-scale=1.0">
IE8及以下的浏览器不支持media query。你可以使用 media-queries.js 或 respond.js 。这样IE就能支持media query了。
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
第二步. HTML 结构
这个例子里面，有header、content、sidebar和footer等基本的网页布局。
header 有固定的高180px，content 容器的宽是600px，sidebar的宽是300px。
第三步. Media Queries
CSS3 media query 响应式网页设计的关键。它像一个if语句，告诉浏览器如何根据特定的屏幕宽口来加载网页。
如果屏幕窗口小于980px，规则就生效。设置了容器的宽度为百分比的形式而不是像素单位，这样会更加灵活。
如果文档宽度小于 300 像素则修改背景演示(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
