什么是响应式web设计?响应式风站设计要点

概念响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

技术手段一切弹性化：我们通过响应式的设计和开发思路让页面更加"弹性"了。图片的尺寸可以被自动调整，页面液态图片技术布局再不会被破坏。虽然永远没有最完美的解决方案，但它给了我们更多选择。无论用户切换设备的屏幕定向方式，还是从台式机屏幕转到iPad上浏览，页面都会真正的富有弹性。通过液态网格和液态图片技术，并且在正确的地方使用了正确的HTML标记。响应式图片：响应式图片技术思想：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件，我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。趋势响应式设计在2012年被提的比较多，但是响应式设计仍然在不断变化，不断创新。比如，新的设备不断出来(iPad Mini)，这让以前的设计想法土崩瓦解。而各种Web的响应式设计也获得了越来越多的注意，“让人们忘记设备尺寸”的理念将更快地驱动响应式设计，所以Web设计也将迎来更多的响应式设计元素。UIKitUIkit 是一个轻量级、模块化的前端框架，可快速构建强大的web前端界面。它根据不同的屏幕分辨率与上网设备，会自动做出响应，提供一致的体验。Bootstrap由两个Twitter员工开发并开源的前端框架，目前已经更新到了v3.0版本，在Github上非常火爆，在国内也有很多粉丝，值得一试。Adobe Edge Inspect对移动开发者尤其有用的工具，其前身是 Adobe Shadow，用于帮助设计师和开发者同时在多个移动设备上预览应用设计，发现和解决跨平台问题。Responsive Web Design Sketch Sheets如果你还在用纸和笔来创建你的实体模型，你可以用这些现有的草图来设计你的交互网站了。Foundation号称是世界上最先进的响应式前端框架。SimpleGrid轻量级的响应式 CSS 网格系统，让你可以快速创建适应于手机和平板电脑的网站。Responsive Testing这个工具可以让你预览你设计网页在不同设备上的效果，只需要访问它的网站并输入你网站的地址就可以看到了。十大开发框架编辑Gumby FrameworkGumby 2是建立在Sass基础上的。Sass是一款非常强大的CSS 预处理器，允许用户自主快速的开发扩展Gumby，同时提供很多新的工具来自定义和扩展Gumby框架。Gumby 2是一个非常棒的响应式CSS框架。Get UI KitGet UI Kit是一款轻量级、模块化的前端框架，用于开发快四且强大的Web界面。FoundationFoundation是一个易用、强大而且灵活的框架，用于构建基于任何设备上的Web应用。提供多种Web上的UI 组件，如表单、按钮、 标签等。SemanticUI是Web的灵魂！Semantic是为攻城师而制作的可复用的开源前端框架。提供各种UI组件，使得开发更加直观、易于理解。52Framework52 Framework主要用于优化HTML5和CSS3的跨浏览器兼容性的框架，可在所有主流浏览器上运行。PureCSSPure是一组小的、响应式CSS模块，可用于任意Web项目中。它可作为每个网站或Web应用的起步工具，帮助开发者处理应用程序所需的所有CSS工作，同时不会让每个应用千篇一律。ResponsablecssResponsable使用最少的Sass，带给你最完美的响应式框架。TukTukTukTuk支持代码重用功能，提供更加快速、高效的样式列表，易于添加与维护。KubeKube是全球最为流行、最灵活的CSS框架之一。其带给你最强大的功能选择，极具创意性与美观性。IvoryIvory是一款强大、灵活、易用的响应式框架。 Ivory基于12列的响应式网格布局，包含表格，按钮，表格，分页，拨动开关，工具提示，手风琴，选项卡等网站中常用的组件和样式。[1] 应用到浏览器1. 测试主流表格因素和浏览器如今客户不仅仅使用iPhone和笔记本，而且使用iMac的27英寸显示器，10英寸的Kindle和很多平板设备。这些设备可能会使用不同的浏览器，并且每种表格因素和浏览器的组合都可能导致不同的页面渲染。并且这些行为可能在每个版本上都不太一样。好消息是浏览器是免费的。如果你使用Windows平台，可以很容易地安装主流浏览器—Internet Explorer、Chrome、Firefox—然后可以使用免费工具，比如Browsershots，或者付费工具，比如CrossBrowserTesting，来检查网页在Safari上的外观。如果你使用的是Mac，可以安装除了Internet Explorer（IE）之外的所有浏览器 -- 但是可以从Modern.ie上下载IE特定的虚拟机，从而轻松得到几乎所有版本的IE。这时，“测试”工作主要是去查看网页是否渲染正确，浏览所有的可选项，验证动态内容是否能正常加载，看上去是否奇怪，并且执行并验证程序主逻辑。如果是房屋抵押应用程序，那么就去尝试新建一个抵押。如果是文字处理程序，就尝试创建一个文档——并且在测试过程中检查用户界面。我们也提到了平台。需要找出软件主要的使用者是谁。对于内部软件，用户很可能会使用笔记本，手机（Android和iOS），或者平板。建议购买每种主要类型的机器作为测试机型，这些费用相比整体开发成本而言应该非常小。当测试团队等待所需的特定移动设备时，开发团队很可能愿意分享他们的手机和平板。最后，考虑是否需要支持旧的浏览器，可能是为了公司客户，并且在这些设备上做程序主逻辑测试。在此期间，可能会发现可用性问题，第一个图片显示的地方不合适，或者页面“感觉”很奇怪。将这些发现分享给团队。这可能不是个bug，但也可能是。2. 改变浏览器大小基于“响应式内容”的本质，页面应该在任何合理屏幕大小的设备上看上去都很舒服，从300*300的手机到2550*1600像素的显示器。最快最方便的评估响应式功能的方式是大幅改变浏览器的大小，检查显示情况。对于这类测试不需要任何搭建时间。只需要打开网页，点击浏览器的右上角，拖拽到所需的大小。文本是否在你认为应该在的位置，是否仍然可读？图像是否能合理伸缩？控件是否还在页面上——按钮，文本输入框，日期控件和其他的——是否仍然可用？它们有没有遮盖掉其他重要的内容？危险之处是你发现了一个bug，可能很难重现，产品经理会说“没有人会这么快地改变浏览器尺寸，把它拖拽到整个显示器上，如果他们真这么做了，那么应该告诉他们不要这么做。”你可能会发现一堆bug，却无法说服开发人员修复它们。记住：说不定就有一种平板设备有这样的屏幕分辨率。最新的IE和Chrome版本有工具可以帮助调整浏览器尺寸到需要的合适大小，比如移动手机或者平板。如果你在快速改变浏览器大小时发现了一个很难重现的bug，但是可以在一些拥有正常大小的设备上重现这个问题，那么你可能就有了需要修复这个问题的有力根据。3. 移动设备和旋转移动设备使得响应式网页设计变得如此重要。移动设备也给响应性带来了一个新的要求：旋转。这些小型设备会跟着主人去任何地方。这些设备也可以随意旋转，从纵向到横向再转回来。这似乎和改变大小很类似。但是实际上设备的每次旋转之后，网页都需要重新渲染。一些应用在改变大小时可能会改变自身行为 -- 比如，iOS7的计算器，在IPhone4的纵向模式下会隐藏科学计算选项。4. 响应式检查响应式检查点的所有描述在网上都可以找到。其中的一些很简单，告诉你在不同的浏览器尺寸下网页看上去的样子。更多复杂的选项，比如BrowserStack，模拟一系列可能的屏幕尺寸和横向纵向模式切换能力的组合。这样的可配置性和模拟尺寸交互的组合可以帮助创建强大的响应式测试环境。这是ami.responsivedesign.is上的简单图片，以某个真实网页的URL为输入，将其在五种不同的设备上加以渲染。ami.responsivedesign.is网页不是将其当做静态图片加以渲染，图片上的滚动栏可以上下滚动。

深圳市洛壹网络科技有限公司专注于响应式网站设计，响应式网站开发。在响应式网站制作方面秉承用户体验最大化，代码精简的原则。