在全面进入互联网时代后,随着各种移动设备的普及,移动互联网更加受到大众的青睐。由于移动互联网的使用量远远超出了传统互联网的使用量,移动设备也正在逐渐超越桌面设备。因为用户在移动设备上的使用习惯不同,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. 某些时候 v-if 会导致 v-modal 内部数据获取不到 也watch不到,这个时候用v-show即可,另外提一下数组要整体赋值才有双向绑定

    某些时候 v-if 会导致 v-modal 内部数据获取不到 也watch不到,这个时候用v-show即可,另外提一下数组要整体赋值才有双向绑定

  2. Spring扩展:替换IOC容器中的Bean组件 -- @Replace注解

    1.背景:     工作中是否有这样的场景?一个软件系统会同时有多个不同版本部署,比如我现在做的IM系统,同时又作为公司的技术输出给其他银行,不同的银行有自己的业务实现(比如登陆验证.用户信息查询等) ...

  3. 覆盖io.spring.platform管理的版本号

    使用io.spring.platform时,它会管理各类经过集成测试的依赖版本号.想要覆盖其中某个依赖的版本号个: https://www.cnblogs.com/ld-mars/p/11818252 ...

  4. Natas24 Writeup(strcmp绕过漏洞)

    Natas24: 一个登录页面,查看源码,发现关键代码: if(array_key_exists("passwd",$_REQUEST)){ if(!strcmp($_REQUES ...

  5. 【ES】Java High Level REST Client 使用示例(增加修改)

    ES提供了多种编程语言的链接方式,有Java API,PHP API,.NET API 官网可以详细了解 https://www.elastic.co/guide/en/elasticsearch/c ...

  6. hdu2087kmp模板练习

    题目网址:http://icpc.njust.edu.cn/Problem/Hdu/2087/ 代码: #include<bits/stdc++.h> using namespace st ...

  7. Building Applications with Force.com and VisualForce(Dev401)(十八):Visualforce Pages: Introduction to Visualforce

    Dev401-020:Visualforce Pages: Introduction to Visualforce Course Objectives1.Understand the benefits ...

  8. 使用Keras进行深度学习:(六)LSTM和双向LSTM讲解及实践

    欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识! 介绍 长短期记忆(Long Short Term Memory, ...

  9. 加密解密 Python

    常见加密方式和Python实现 1. 前言 我们所说的加密方式,都是对二进制编码的格式进行加密的,对应到Python中,则是我们的Bytes. 所以当我们在Python中进行加密操作的时候,要确保我们 ...

  10. HTML 基础(六)

    一.脚本 JavaScript 是 HTML 页面具有更强的动态和交互性 <script> 标签 <script> 标签用于定义客户端脚本,<script> 元素既 ...