在全面进入互联网时代后，随着各种移动设备的普及，移动互联网更加受到大众的青睐。由于移动互联网的使用量远远超出了传统互联网的使用量，移动设备也正在逐渐超越桌面设备。因为用户在移动设备上的使用习惯不同，UX设计师无法将桌面设备上的网页排版原封不动地复制到移动设备上，这会使用户在网页的操作和阅读上十分不方便。

因此，设计师试图将移动设备和桌面设备的网页分开来设计，然而因此面对的问题是：市场上移动设备屏幕的尺寸都是完全不一样的。比如iPhone的移动设备已经更新过很多次屏幕尺寸；不同品牌之间设备屏幕尺寸也无法把控，设计师不能为每一个不同的屏幕尺寸去设计适合它们尺寸的网页。

这种情况下，Ethan Marcotte在2010年提出了响应式web设计（Responsive web design）这一概念，其设计目标是：自行识别设备屏幕尺寸并做出相应调整的网页设计，从而提高网页在移动端的用户体验。同时，Ethan Marcotte也模拟建立了一个简单的响应式web的示范网站，题主可以点进链接体验一下。

响应式web设计（Responsive web design）的更多相关文章

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

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

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

    中文名 响应式Web设计 提出时间 2010年5月 英    文 Responsive Web design 解    释 一个网站能够兼容多个终端 目    的 解决移动互联网的浏览 优    点 ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. （转）.balignl 16,0xdeadbeef浅析

    原文地址:http://zqwt.012.blog.163.com/blog/static/12044684201031102956976/ 最近在分析u-boot的源代码,看到这一行: .balig ...

  2. Java学习笔记(2)——有关类

    Java类的高级特性: {Java管理文件机制:类包. 同一个包中的类互相访问时,可以不指定包名. 同一个包中的类不必存放在同一位置,如com.lang.class1和com.lang.class2可 ...

  3. 原创】Java并发编程系列2：线程概念与基础操作

    [原创]Java并发编程系列2:线程概念与基础操作 伟大的理想只有经过忘我的斗争和牺牲才能胜利实现. 本篇为[Dali王的技术博客]Java并发编程系列第二篇,讲讲有关线程的那些事儿.主要内容是如下这 ...

  4. Python 之解释器

    Python 是一种解释型语言.所谓解释型语言是相对于编译型语言的. 解释型语言运行代码时会使用解释器从代码顶部一行一行解释并运行代码,直到结束. 而编译型语言是将所有代码编译成计算机可以直接识别的机 ...

  5. Swift 4.0 数组(Array)学习

    定义数组常量(常量只有读操作) let array1: [Int] = [11, 55, 5] let array2 = [11, 55, 5] 定义数组变量 var array: [Int] = [ ...

  6. 【简说Python WEB】pyechart在flask中的应用

    个人笔记总结,可读性不高.只为自己总结用.怕日后忘记. 这里用到了tushare,pandas等python组件. pyechart的案例 c = ( Bar() .add_xaxis([" ...

  7. Python异常处理，将异常写入到一个文件

    '''定义一个函数func(urllist) urllist:为URL的列表,例如:['http://xx.com','http://www.xx.com','http://www.xxx.com'. ...

  8. PyCharm导入selenium的webdirver模块出错

    selenium安装好后准备验证一下,导入的webdriver有红色标识,检查了浏览器驱动的.环境变量仍然没有解决问题. 后来在百度找到了原因:项目没安装selenium Interpreter 打开 ...

  9. 【codeforces】Codeforces Round #612 (Div. 2) C. Garland——DP

    题目链接 贪心模拟了半天,最后放弃了 题意 给你一串从1−n1-n1−n的序列,其中部分未知(表示为0),补全序列使得相邻数值奇偶性相反的数量最少 相邻数值的奇偶性相反:两个相邻的两个数值,其中一个为 ...

  10. C 2010年笔试题

    1 有一个函数, 写一段程序,输入的值,输出的值. #include <stdio.h> void main() { int x,y; printf("输入x:"); ...