响应式网站设计

什么是响应式布局？
1、服务器根据不同的浏览器用户端，为用户呈现不同的页面效果。
2、可以让一个网站兼容不同分辨率的设备，给用户更好的视觉使用体验。
3、移动互联网催生了响应式布局的诞生。
响应式设计优缺点
优点:
解决了设备之间的差异化展示,让不同的设备达到最优的视觉体验.
缺点:
兼容性代码多,工作量大,加载速度受影响
对原有网站布局会产生影响,用户判断未必精确.

响应式设计的原则
1.移动优先：在设计的初期就考虑页面如何在多终端展示
2.渐进增强：充分发挥硬件设备的最大功能

如何实现响应式布局？
1.css3-Media Query：代码简单（媒体查询）
2.借助原生Javascript：主要用于老浏览器上，加载速度慢，不推荐
3.第三方的开源框架，如bootstrap，可以很好的实现浏览器对响应式的支持

基本语法
外联CSS语法

<link rel=“stylesheet” href=“wide.css”   media="screen and (min-width:320px)" />
<link rel=“stylesheet” href=“mobile.css”  media="screen and (max-width:1000px)" />

内嵌样式的语法

<style>
@media all and  (min-width:500px) { … }
</style>