在全面进入互联网时代后,随着各种移动设备的普及,移动互联网更加受到大众的青睐。由于移动互联网的使用量远远超出了传统互联网的使用量,移动设备也正在逐渐超越桌面设备。因为用户在移动设备上的使用习惯不同,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. Spring解决循环依赖,你真的懂了吗?

    导读 前几天发表的文章SpringBoot多数据源动态切换和SpringBoot整合多数据源的巨坑中,提到了一个坑就是动态数据源添加@Primary接口就会造成循环依赖异常,如下图: 这个就是典型的构 ...

  2. Windows Server 2012 R2 域证书服务搭建

    网管大叔说要给每个人颁发一个证书,这个证书很耗电 1.在服务器管理器中添加角色和功能 下一步 下一步 勾选Active Directory证书服务 下一步 下一步 勾选证书颁发机构,证书颁发机构Web ...

  3. 如何让antd的Modal组件的确认和取消不显示(或自定义按钮)(转载)

    使用Modal中的footer属性,如下: <Modal title="更改成员" visible={visible} confirmLoading={confirmLoad ...

  4. JavaScript数组排序(冒泡排序、选择排序、桶排序、快速排序)

    * 以下均是以实现数组的从小到大排序为例 1.冒泡排序 先遍历数组,让相邻的两个元素进行两两比较 .如果要求小到大排:最大的应该在最后面,如果前面的比后面的大,就要换位置: 数组遍历一遍以后,也就是第 ...

  5. C/C++、C#、JAVA(二):基本类型和转换操作

    基本类型和转换操作 数据类型 C语言中的基本类型如下. 类型 存储大小 值范围 char 1 字节 -128 到 127 或 0 到 255 unsigned char 1 字节 0 到 255 si ...

  6. 74. pNextID、pNextVal、pNID的区别

    pNextID是平台调用单个新增组件的时候调用的: pNextVal是平台批量新增的时候调用: pNID应该是自己写的 :

  7. MySQL学习(3)

    一 SQL语句 1. 数据库级别(*) 显示全部数据库:show databases; 创建数据库:create database '数据库名字’; 使用数据库:use '数据库名字'; 删除数据库: ...

  8. 快速理解编码,unicode与utf-8

    1.为什么编码,因为cpu只认识数字2.ASCII 一个字符共占7位,用一个字节表示,共128个字符3.那么ASCII浪费了最高位多可惜,出现了ISO-8859-1,一个字节,256个字符,很多协议的 ...

  9. 如何让Docker镜像飞起来

    前言 Docker用起来非常爽,尤其是用于DevOps实践时.但是,当你在国内或者本地拉取镜像时,经常会碰到各种“便秘”——要么镜像拉取缓慢,要么时断时连,要么连接超时! 当我们的镜像又比较大时(比如 ...

  10. Apple的Core ML3简介——为iPhone构建深度学习模型(附代码)

    概述 Apple的Core ML 3是一个为开发人员和程序员设计的工具,帮助程序员进入人工智能生态 你可以使用Core ML 3为iPhone构建机器学习和深度学习模型 在本文中,我们将为iPhone ...