响应式网页设计在多屏互动时代显得越来越重要了，因为采取响应式网页设计的网页可以在不同的设备运行，而衡量一个网站的响应式是否优秀，要看它是否有灵活的布局，而是否有很灵活的布局，全靠怎么设计，网页设计的合理与否对于网站的响应后效果起着至关重要的作用，那么做好响应式网页设计要注意什么呢？
不要优先为桌面版设计
开发者通常会犯的一个常见错误，他们设计网站时优先考虑桌面版，因为在这些人眼中，将基于桌面版的网站转变为针对其他设备的响应式web设计是件很轻松愉
快的事情。但是，这个发生在计划规划阶段的错误本身会变成一个非常巨大的问题。甚至会造成返工，当然，大量的错误也会蔓延出来。
导航栏菜单的麻烦
当为移动端进行设计时，导航栏设计的问题可能会成为你的一个祸根，所以不得不避免产生麻烦。不想是固定宽度的设计，响应式设计的导航应当根据设备类型进行确定(所以智能手机的导航菜单可能和平板电脑，当然还有桌面版的导航菜单互有差异)。
许多设计者会发觉他们自己被这样一项任务搞的很崩溃——尝试设计一个可以适应所有屏幕的导航菜单。在很多情况下，设计者奋力将水平列表菜单转换为垂直列表菜单，尤其是在适配较小的手机屏幕时。然而，由于该导航栏并不是根据屏幕进行设计，这可能会导致一项很差的用户体验。
不应隐藏内容
响应式设计通常会有更少的空间展示图片和内容，但是这并不意味着你的内容应当被忽略。你不得不采取一种方式重新安排内容，使其能够保证易读性。这个比较容
易实现，可以通过创建导航链接并且使用锚，是用户在一个页面中能看到他们一直在寻找的内容。那些通过CSS布局控制内容隐藏的应当明白，这些内容依然会被
加载，因此，你通过为用户提供完整的观看体验也没什么大不了。简单而言，用户不应该由于他们所使用的设备而遭受开发者的“惩罚”。
单独的移动端网站地址
单独为移动端网站分配一个地址整个就是一个灾难，这摧毁了我们起初交互设计的目的，并且是可以论证的。当用户在访问网站时，重定向到移动端版本，结果是不得不浪费了很多宝贵的时间。此外，这也能非常严重地影响到你的搜索排名。但是，理所当然，使用不同的URL也有许多优势。它可以确保你能够架构具有更轻便
页面的移动端网站，并且能够在智能设备上表现更好。该站点也能照顾到在特定平台上的性能和表现。不幸的是，具有单独移动端网站地址的消极影响远大于积极影响。
糟糕的用户体验
你不能简单的把桌面版的内容压缩成移动版;这么做将会影响你的用户的体验，用户可能会抛弃你的产品。在手机的有限空间内创建一个友好的界面是十分重要的。
你可以采取一些措施，比如，使用一个下拉菜单代替桌面上的导航条，这样会节省你的空间。如果你先设计的是移动端，那么这通常不会是一个令人头疼的问题。
不要忽视跨情景的公约
当你在做一个响应式的设计，你不能只考虑台式和移动手机设备，你还应该考虑到其它类型的设备。人们可能会通过内嵌浏览器的智能电视或机顶盒来访问你的网
站。在现在，甚至掌上电脑都有不同的类型。但是，这并不意味着你可以为所有的设备创建一个相同的用户界面，你最好是为不同的设备创建不同的网站。你所需要
做的是创建一个响应导航和一个用户容易理解的设计。创建的这个导航可以清楚的保存设备的上下文环境。
不要忽视页面的加载时间
随着宽带的普及，网页开发者开始习惯在页面上大量的使用相对来说较大的资源。然而，当我们使用手机时，我们的用户使用的是较慢的2G和3G网络。同样的，那些保持minf国际的用户，他们是按使用的带宽量来付费的。
一个页面在台式机上很快的加载进来，但是，在手机上加载一个页面会花费很长时间或者去使用额外的、昂贵的带宽。更糟糕的是，当用户被迫去等待页面加载时，即使是几秒钟，他们会离开这个页面，同时你就会失去了你的流量。
不要为触摸屏设备开发
今天大多数手持的设备使用的是触摸屏，甚至是很多笔记本也开始使用触摸屏了。因此，当你设计响应式设计时，很重要的一点是不要忽略掉处理触摸的重要性。有
以下两个方面原因：第一，可点击项，比如按钮要考虑到用户的手指的大小(不要让用户缩放点击)。第二，你要正确的处理触摸事件。这么做可以克服300ms
的点击事件延迟。
不找经验浅的人做前端开发
web前端技术属于门槛低，但是水很深的职业，所以设计师也会做前端，有人自学两天也可以做前端，但是不要忽视了web前端是以细节取胜的，好坏的分辨全在细节，包括合理的布局，这个对做效果尤其重要，规范的css代码，这个对兼容性有很大影响。特别是响应式布局，需要有扎实的基本功和多年的经验。
㈡ 怎么制作一个H5响应式网站
您好，可以尝试使用新一代响应式网站设计工具 意派coolsite360 ，简单又专业。
意派coolsite360 特色介绍：
专业建站工具
专业建站工具是面向具有一定Html、css基础的专业人员，可使用专业建站工具进行网站前端设计，每一个细节都可灵活掌控，并可导出符合标准的代码进行二次开发。
模块建站工具
模块建站工具，创新性的采用可配置的预制模块进行网站快速搭建，通过悬浮导航、轮播、相册、内容列表、时间轴等数十款预制模块，可快速搭建酷炫的响应式网站。
可视化Markdown文档编辑器
文档编辑器，支持可视化以及Markdown双模式编辑，可用来编写单篇文档，还可通过文档集功能，进行多篇文档的整合，用来编写产品手册及帮助文档。
㈢ 怎样建立一个H5响应式网站
只要注册一个域名就能做。
1.注册完成后，直接登录网站后台，进入控制中心的域名管理即可选择建站。域名版的免费建站自带空间，直接在ek；80的模板基础上搭建，里面提供了丰富的单页面响应式网站模板，满足企业宣传、域名出售、活动页面、简历、名片等多种展示需要。除了常规的单页面模板，也可以尝试用多页面网站的模板搭建单页网站。
㈣ 如何建设一个响应式网站 只需五个步骤
响应式网站设计（Responsive Web design）的理念是：页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
㈤ 网页设计中响应式具体怎么实现
响应式网页设计现在无疑是一件大事情。如果你还不了解响应式设计，可以看看我最近发表的响应式站点列表（译者注：可以好好看看示例中的网站在不同分辨率下的展现方式）。对新手来说，响应式设计可能有一点复杂，但是事实上比你想象的简单。为了帮助你迅速的了解响应式设计，我起草了一篇快速教程。你可以在3个步骤中学习到响应式设计和媒介查询（Media Queries）的基本原理（假定你了解基本的CSS知识）。
第一步：Meta标签
大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。
第二步：HTML结构
在这个例子里，我有一个包括头部、内容、侧边栏和页脚的基本页面布局。头部有固定的高度180像素，内容容器是600像素而侧边栏是300像素。
第三步：媒介查询-Media Queries
CSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。
当视图宽度为小于等于980像素时，如下规则将会生效。基本上，我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。
然后为小于等于700像素的视图指定#content和#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示。
对于小于等于480像素（手机屏幕）的情况，将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。
你可以根据你的喜好添加足够多的媒介查询。我在示例中仅仅展示了3个媒介查询。媒介查询的目的在于为指定的视图宽度指定不同的CSS规则，来实现不同的布局。媒介查询可以写在同一个或者单独的样式表中。
㈥ html5怎么制作一个响应式网页
HTML5 制作响应式网页，首先需要考虑是全平台适配还是只是移动端适配。这里以移动端响应式网站为例，讲述如何制作响应式网页。
1、选定基本设计尺寸，一般以1080为基准。确定响应式web设计的应用场景之后，和美工（或设计师）沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用流式布局以及rem等可以使用一套设计图，以最常用的移动设备屏幕分辨率为基准。
2、当美工完成设计图之后，前端工程师的工作就开始了。这时你就可以使用PS或是FW进行切图了。一般说来，Fireworks cs6切图更快，但是Fireworks有时会有图片失真的情况发生，所以，有时需要使用PS进行配合，PS有切片工具可以专门用来切图。
㈦ 如何做一个免费的单页面响应式网站
你可以通过下载响应式网站模板来进行搭建网站，这样网站能够适应各种终端设备，而且在管理和运营上，响应式网站也要方便的多。
响应式页面的优点 1.跨平台。 在手机，pad，电脑上均有不俗的表现; 2.节省人力开发成本。 不再需要有人特地维护PC页面，移动页面; 3.表现力一致 在不同的平台上看到的东西都是基本一致的，会让感觉体验良好。