如何制作响应式网页

详细操作

需要先有大屏幕和小屏幕两版的设计稿，或者超大屏幕、大屏幕和小屏幕三屏，以下图片是两屏设计，适应PC端和移动端。

将两屏所需的图片，用photoshop分别切出来，保存在两个文件夹，方便管理，每一个版本只会调用对应版本图片。

meta头部设置参数，根据设备分辨率让浏览器的可视宽度来适应。

进入html框架部分，多版本元素一致情况下，按照其中一个版本添加html的Dom元素即可。若有差异的话，也要在对应的位置，添加Dom元素，后续通过css或者js使该部分隐藏。

进入CSS编写部分，个人习惯是从大屏幕往小屏幕编写的，因为大版本通常包含的元素比小版本要多。

CSS使用媒介查询-Media Queries方法进行编写，分别写不同版本的CSS样式。

由于媒介查询的方法，并不适应低版本的浏览器，需要加入JS去帮助兼容，以下JS可上网下载。需要注意点是此JS一般需要跟网站的index.html放在同一个目录下，不适合分开管理，否则无法加载图片或者样式。

用户类似问题：

问题1：如何制作响应式网站

页面有能力去自动响应用户的设备环境，响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 响应式Web设计是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点... >>详细

问题2：html5 怎么制作响应式网页

步骤1 创建空白的HTML 5模版 首先，我们创建一个空白的模版，代码很简单，如下所示： 复制代码 步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如： article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, sect... >>详细

问题3：用DreamWeaver做一个响应式网站

您好，这个可是难了，您看看下面的建议，能否对您有帮助： 1、首先我们看下什么是响应式网页设计。它为用户从他们的电脑切换到iPad、iPhone、黑莓、HTC、平板电脑等等，该网站能自动切换适应的分辨率，图像大小和脚本。换句话说，该网站能自动响... >>详细

问题4：如何免费制作一个HTML5响应式网站

两个途径：找一个HTML5的网站，相中了的话，可以用PHP+MySQL仿站 再则就是懂HTML5+CSS3直接写网站。 >>详细

问题5：响应式网站怎么做？

我最近也再学 给你个网站 你研究一下吧 http://www.bootcss.com/ >>详细