响应式开发(一)-----响应式网页设计学习导航

什么是响应式web设计

现在开发一个产品，基本上都会需要兼顾 PC端和 移动端。

一般有两种思路:

1.为每个终端做一个特定的版本,并给2级域名,根据终端环境调用不同的版本代码。

2.一个网站能够兼容多个终端

而响应式设计  就属于  让一个网站能够兼容多个终端。

响应式Web设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。

也就是自适应，就是可以自动识别屏幕宽度、并做出相应调整的网页设计。

响应式设计需要学什么

CSS3 Media Queries

开始研究响应式web设计朋友，CSS3 Media Queries是入门。

CSS3 Media Queries能实现页面的弹性化。

例如：

在head里加入这条元标签，那移动浏览器中页面将以原始大小显示，并不能缩放。不让浏览器缩放目的是保证网页能自适应屏幕的完整性，避免网页混乱。

IE8或者更早的浏览器并不支持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。

在CSS中加入语句：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/}

每个站点应该有多个判断，1024px，768px，650px，500px，400px，350px。

这意味着宽度在1024px以下的屏幕，会呈现六种不同的效果。

唯一不同的是加入了display:none，不显示某些内容。所以通过CSS观察发现，屏幕越小，显示的内容就越来越少。

响应式图片

  响应式图片技术思想：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件，我们可以在Github上获取。

    包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。

响应式的前端框架

UIKit

UIkit 是一个轻量级、模块化的前端框架，可快速构建强大的web前端界面。它根据不同的屏幕分辨率与上网设备，会自动做出响应，提供一致的体验。

Bootstrap

由两个Twitter员工开发并开源的前端框架，目前已经更新到了v3.0版本，在Github上非常火爆，在国内也有很多粉丝，值得一试。

Adobe Edge Inspect

对移动开发者尤其有用的工具，其前身是 Adobe Shadow，用于帮助设计师和开发者同时在多个移动设备上预览应用设计，发现和解决跨平台问题。

Responsive Web Design Sketch Sheets

如果你还在用纸和笔来创建你的实体模型，你可以用这些现有的草图来设计你的交互网站了。

Foundation

号称是世界上最先进的响应式前端框架。

SimpleGrid

轻量级的响应式 CSS 网格系统，让你可以快速创建适应于手机和平板电脑的网站。

Responsive Testing

这个工具可以让你预览你设计网页在不同设备上的效果，只需要访问它的网站并输入你网站的地址就可以看到了。

相关教程:

http://developer.51cto.com/art/201503/467737.htm

http://www.open-open.com/news/view/1aa368e