响应式设计时代，我们该如何设计网站？

但随着各种屏幕尺寸设备的兴起，以及交互方式的多样性，这些默认值已不再适用现在我们进行网站设计所用到的所有默认值均需要更新Web近年来所发生的变化人们一直在谈论Web发生了改变，让我们首先看看Web究竟发生了哪些变化屏幕尺寸90年代，Web页为640像素宽，21世纪初，其宽增长到800像素几年以前，我们将它调整为1024像素但就在5年前，“奇怪的事”突然发生了小屏幕设备进入市场一时间，我们对Web设定的宽就不再适合了不久，平板电脑进入市场现在屏幕视窗的高超过了宽屏幕尺寸已没有固定的值（图片来自：AramBartholl）现在我们无法了解用户所使用窗体的大小我们只能假设其宽是一个令用户舒服的随机数这些数字是任意的，总会有一些用户会看到不完整的Web页面在这里，我们可以先忽略这些用户“每个人都有一个鼠标”我们总是默认每个用户都有一个鼠标虽然我们知道，这并不总是事实大部分设计咐昌师会忽略为不使用鼠标的用户设计交互方式不管什么原因，那些不得不使用键盘的用户往往很难与我们的网站进行交互但由于大部分用户确实使用鼠标，当时很多设计者认为设计只要满足大部分人就可以了，所以我们设计出的网站还是有很多人是无法使用的事实证明，这个数据一直在增加很多依靠鼠标进行的交互，在触摸设备上是完全不起作用的因为用户喜欢这些设备，甚至管理者和设计师都在用它们，所以它们是很难被忽略掉“每个人都有宽带互联网”我们另一个默认情况就是每个人都有速度超快的互联网，至少和我们的一样快如果他们现在没有它，不久也会有的这似乎又是实事网速确实越来越快但是，今天越来越多的人在使用差劲的、不可靠的3G网络如果你曾在火车上使用3G网络，你就会明白我所说的如果你曾在酒店使用其提供的免费Wi-Fi，你就会明白我们假设互联网越来越快是不成立的这是我们思维中的一大变化，我们确实应该为这些用户考虑这将对我们的设计外观产生较大影响“大家的电脑一年比一年快”电脑越来越快，过去是这样的如果在买电脑之前再等半年，同样的价格你就可以买一台快两倍的电脑这主要针对新式台式机，但对于移动设备，其有比处理器速度更重要的事例如，对于手机，最重要的是电拿简腊池待机时间：你不想每次打完电话后都必须充电吧还有另一个趋势：现在的制造商开始销售价格更低廉的设备，而非速度更快的设备相比处理器速度，很多用户更关注价格和电池待机时间你的老式电脑怎么样了？你可能卖了，也可能扔了但用户仍保留并使用着并不是每个人都拥有与我们设计师同样的硬件设备“所有的显示器均校准过”我们很清楚这一条是不对的只有那些可视化专业人士的显示器才进行过校准其他人的显示器大部分都无法正确显示色彩，很多显示器还是十分差劲的我所测试过的大部分移动手机有着相当棒的显示屏可当在阳光下使用时，如果你幸运，或许还可以看得见内容，但却无法看到低对比度设计下的微妙渐变人们总会使用那些低劣的显示器，而且访问你网站的人往往视力不好越来越多的人正在看不合格的调色板与其购买消滑一款专业的艺术类显示器，不如购买一款廉价的显示器和几台低端设备来测试你的作品，这是更好的投资Web在最近5年里发生了变化，创建网站的老方式已不再适用我们需要新的方法论ThisIsResponsive，该网站为响应式设计提供了很好的资源过去几年里，我们一直在积极地研究新方法，以解决Web在不同尺寸屏幕上的显示问题除了响应式设计，在日益增长的设备上存在越来越多的挑战我们必须寻找新的交互模式：我们需要可以工作于任何设备上的界面设计过程中，一些新的约定俗成正在产生，即新的默认下文将列出我所收集到的新的默认情况新的默认：激活方式本想用“触控”一词，但考虑到大家对该词的理解不同，所以改为了“激活”对于所有设备，无论他们需要怎样的输入方式，都需要用户以某种方法来激活某件事对于鼠标，就是点击

怎么设计制作响应式网页

随着移动和跨屏时代的来临，响应式网页越来越重要，通过网页制作，使得不同设备、分辨率的网站都有最好的视觉体验。那就前端方面，该怎么才能制作一个响应式网页呢？工具/原料网页编辑器Photoshop方法/步骤需要先有大屏幕和小屏幕两版的设计稿，或者超大屏幕、大屏幕和小屏幕三屏，以下图片是两屏设计，适应PC端和移动端。将两屏所需的图片，用photoshop分别切出来，保存在两个文件夹，方颂敬便管理，每一个版本只会调用对应版本图片。meta头部设置参数，老祥根据设备分辨率让浏览器的可视宽度来适应。进入html框架部分，多版本元素一致情况下，按照其中一个版本添加html的Dom元素即可。若有差异的话，也要在对应的位置，添加Dom元素，后续通过css或者js使该部分隐藏。进入CSS编写部分，个人习惯是从大屏幕往小屏幕编写的，因为大版本通常包含的元素比小版本要多。CSS使用媒介查询-Media Queries方法进行编写，分别写不同版本的CSS样式

网页设计中响应式具体怎么实现？

响应式网页设计现在无疑是一件大事情。如果你还不了解响应式设计，可以看看我最近发表的响应式站点列表（译者注：茄告游可以好好看看示例中的网站在不同分辨率下的展现方式）。对新手来说，响应式设计可能有一点复杂，但是事实上比你想象的简单。为了帮助你迅速的了解响应式设计，我起草了一篇快速教程。你可以在3个步骤中学习到响应式设计和媒介查询（Media Queries）的基本原理（假定你了解基本的CSS知识）。        第一步：Meta标签大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。第二步：HTML结构        在这个例子里，我有一个包括头部、内容、侧边栏和页脚的基本页面布局。头部有固定的高度180像素，内容容器是600像素而侧边栏是300像素。第三步：媒介查询-Media

20款覆盖全面的响应式网站设计工具

 　　灵活的栅格和布局，响应式的图片和智能的CSS媒体查询，构成了响应式网页的主要特征。当用户扔下沉重的笔记本电脑拿起平板，响应式的网站能够自然而然地随之适配，掏出手机也毫无压力，图片和文字都会随着特定的屏幕和分辨率而调整，这就是它的优势。你以为这就观项愿开息洲尔色秋完了?当然不会!在未来，一摸兜里手机忘带了，抬起左手唤醒智能手表，打开网页，也能看!

　　不得来自不说，创建响应式网站越来越容易普调额缩，即使你不是专业钟该注没去的前端也可以轻松搞得定

什么是RWD自适应（响应式）网站建设

响应式网页设计（ResponsiveWebDesign简称RWD）这个术语，由伊桑马科特（EthanMarcotte）提出，是一种网页设计的技术做法。该设计应当根据设备环境(系统平台、屏幕尺寸)进行相应的响应和调整。手机端响应式网页设计也变得更加重要，因为移动端流量现在占互联网流量的一半以上。因此，谷歌宣布差凳移动设备时代的到来。用户体验友好响应式设计可以向用户提供友好的Web界面，因为它可以适应几乎所有设备的屏幕，包括智能手机、平板电脑、TV、PC显示器、iPhone和Android手机，包括横向、纵向的屏幕。2.节省设计开发成本相对需要开发电脑网站、pad网站、手机网站来说，响应式网站设计更有利于节省设计开发成本。从设计角度出发，响应式网站界面只需要设计两套设计效果图。电脑端与iPad基本可以共用一套设计效果图，手机端重新设计一套就可以了。从前端开发角度说，只需要根据临界点为不同终端开发三套不同的css样式

利用axure进行响应式自适应网站的设计

在axure 8发布以后，可以利用几项技术（axure自动生成自适应html、前后端分离、响应式网站设计、restful接口、json或xml等）进一步简化网站的开发，该设计模式的主要流程如下：

1. 产品经理利用axure设计原型。

2. 原型讨论定型后由UI人员设计图标，更新到axure原型中。

3. 由axure生成 自适应的响应式网站 设计的html文件。

参考：http://www.***.com/rp/69来自6039.html