如何设计响应式网页？

需要先有大屏小屏两个版本的设计稿，或者大屏大屏小屏三屏。下图是双屏设计，适合PC和移动。

请点击进入图片说明。

请点击进入图片说明。

用photoshop把两个屏幕需要的图片剪下来，保存在两个文件夹里，方便管理。每个版本只会调用相应的版本图片。

请点击进入图片说明。

Meta header根据设备的分辨率设置参数以适应浏览器的可视宽度。

请点击进入图片说明。

进入html框架部分。如果多个版本的元素一致，则按照一个版本添加html的Dom元素。如果有区别，在相应的位置添加Dom元素，然后用css或者js隐藏这部分。

请点击进入图片说明。

在CSS写作部分，从大屏写到小屏是我个人的习惯，因为大版通常比小版包含更多的元素。

请点击进入图片说明。

使用media query -Media Queries方法编写不同版本的CSS样式。

请点击进入图片说明。

请点击进入图片说明。

请点击进入图片说明。

由于媒体查询的方法，不适合较低版本的浏览器，所以需要JS帮助兼容。以下JS可以在线下载。需要注意的是，这个JS一般需要和网站的index.html放在同一个目录下，不适合单独管理，否则无法加载图片或者样式。

请点击进入图片说明。

什么是响应式网页布局？

就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本

网站创新设计有哪些思路？

响应式网站，可以到网上下载建站系统来做的，例如：pageadmin和discha都是不错的、简单、方便。