中文名
响应式Web设计
提出时间
2010年5月
英    文
Responsive Web design
解    释
一个网站能够兼容多个终端
目    的
解决移动互联网的浏览
优    点
面对不同分辨率设备灵活性强等
        页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

UIKit

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

Bootstrap

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

Adobe Edge Inspect

对移动开发者尤其有用的工具,其前身是 Adobe Shadow,用于帮助设计师和开发者同时在多个移动设备上预览应用设计,发现和解决跨平台问题。
Responsive Web Design Sketch Sheets
如果你还在用纸和笔来创建你的实体模型,你可以用这些现有的草图来设计你的交互网站了。

Foundation

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

SimpleGrid

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

Responsive Testing

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

响应式Web设计(Responsive Web design)的更多相关文章

  1. 响应式网站设计(Responsive Web design)

    页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用 ...

  2. 响应式Web设计(Responsive Web design)的理念

    页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用 ...

  3. 响应式网页设计:互联网web产品RWD概念

    RWD(Responsive Web Design)可称为自适应网页设计.响应式网页设计.响应式网页设计等等,是一种可以让网页的内容可以随着不同的装置的宽度来调整画面呈现的技术,让使用者可以不需要透过 ...

  4. HTML5+CSS3的响应式网页设计:自动适应屏幕宽度

    这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...

  5. FROONT – 超棒的可视化响应式网页设计工具

    FROONT 是一个基于 Web 的设计工具,在浏览器中运行,使得各类可视化设计的人员都能进行响应式的网页设计,即使是那些没有任何编码技能的设计师.FROONT 使得响应式网页设计能够可视化操作,能够 ...

  6. html5 + css3 + jQuery + 响应式布局设计

    1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...

  7. Flex box弹性布局 及 响应式前端设计的优化

    Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...

  8. html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计

    序:通常我们只能控制div的宽度 而不能控制高度,在响应式页面里 如果要这个div是正方形那么必须的用媒体查询在不同的分辨率下写死宽高度 今天突发奇想研究了个 用百分比来动态控制div的高度让其与宽度 ...

  9. bootstrap响应式网页设计的9条基本原则!

    bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...

随机推荐

  1. 每天一个linux命令(53):wget命令

    Linux系统中的wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,我们经常要下载一些软件或从远程服务器恢复备份到本地服务器.wget支持HTTP,HTTPS和FTP协 ...

  2. 每天一个linux命令(45):route命令

    Linux系统的route 命令用于显示和操作IP路由表(show / manipulate the IP routing table).要实现两个不同的子网之间的通信,需 要一台连接两个网络的路由器 ...

  3. 软工实践练习一(个人)----将Androidstudio的项目共享到github

    在Androidstudio上使用git插件 将项目共享至github 将 显示共享成功但是出了点问题 项目文件并没有上传至github库中,而是只创建了一个新的库 问题在于我的gitforwindo ...

  4. JavaIO中的Reader和writer

    1.reader package com.io.Reader; import java.io.BufferedReader; import java.io.FileInputStream; impor ...

  5. 使用Ps制作透明ico

    准备好图片 打开Ps新建透明图片->抠取图片->复制粘贴 保存为gif格式->使用ico在线转换即可

  6. requirejs

    //index.html <!doctype html> <html> <head> <meta charset="utf-8"> ...

  7. 【BZOJ-1030】文本生成器 AC自动机 + DP

    1030: [JSOI2007]文本生成器 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 3253  Solved: 1330[Submit][Stat ...

  8. input使用javascript限制输入带小数的数字

    如题,网上找了很多都不太好实现.我的实现需求如下: 1.如果输入数字不带小数点那么自动加入两位小数,如:输入5,替换为5.00 2.输入5.,替换为5.00 3.输入5.1,替换为5.10 4.输入非 ...

  9. TCP/IP详解 学习三

    网际协议 ip Ip 是不可靠和无连接的 ip首部 4个字节的 32 bit值以下面的次序传输:首先是 0-7 bit,其次 8-15 bit,然后 1 6-23 bit,最后是 24~31 bit. ...

  10. Activity启动模式 及 Intent Flags 与 栈 的关联分析

     http://blog.csdn.net/vipzjyno1/article/details/25463457    Android启动模式Flags栈Task   目录(?)[+] 什么是栈 栈 ...