在全面进入互联网时代后,随着各种移动设备的普及,移动互联网更加受到大众的青睐。由于移动互联网的使用量远远超出了传统互联网的使用量,移动设备也正在逐渐超越桌面设备。因为用户在移动设备上的使用习惯不同,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. iview Checkbox 多选框 v-model 赋值方法 this.innerValueArr = [this.previousValue]

    iview Checkbox 多选框 v-model 赋值方法 this.innerValueArr = [this.previousValue]

  2. httpServletRequest.getCharacterEncoding()取出来是个null,怎么办?

    因为浏览器没有把正确的编码方式给服务器端. 目前,许多浏览器在Content-Type头中不会指定字符编码方式,那么容器就会使用"ISO-8859-1"方式解析POST数据,而此时 ...

  3. 广告行业中那些趣事系列7:实战腾讯开源的文本分类项目NeuralClassifier

    摘要:本篇主要分享腾讯开源的文本分类项目NeuralClassifier.虽然实际项目中使用BERT进行文本分类,但是在不同的场景下我们可能还需要使用其他的文本分类算法,比如TextCNN.RCNN等 ...

  4. 原来rollup这么简单之 rollup.watch篇

    大家好,我是小雨小雨,致力于分享有趣的.实用的技术文章. 内容分为翻译和原创,如果有问题,欢迎随时评论或私信,希望和大家一起进步. 大家的支持是我创作的动力. 计划 rollup系列打算一章一章的放出 ...

  5. eclipse、 IDEA中字母大小写转换快捷键

    eclipse 中字母大小写切换快捷键: ctrl + shift + x     转为大写 ctrl + shift + y     转为小写 IDEA  中字母大小写切换快捷键: ctr + sh ...

  6. Celery框架的基本使用方法

    一. Celery简介 Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统,专注于实时处理的异步任务队列,同时也支持任务调度. Celery的架构由三部分组成,消息中间件(message ...

  7. navicat和pymysql

    内容回顾 select distinct 字段1,字段2,...from 表名 where 分组之前的过滤条件 group by 分组条件 having 分组之后过滤条件 order by 排序字段1 ...

  8. ImportError: libcusolver.so.8.0: cannot open shared object file: No such file or directory

    问题描述: ImportError: libcusolver.so.8.0: cannot open shared object file: No such file or directory 首先检 ...

  9. word2vec 和 glove 模型的区别

    2019-09-09 15:36:13 问题描述:word2vec 和 glove 这两个生成 word embedding 的算法有什么区别. 问题求解: GloVe (global vectors ...

  10. Unity 随机房间地图生成

    无论是在迷宫还是类似于地牢的游戏地图中,利用程序来生成每次都不一样的地图是一件叫人兴奋不已的事. 这时我们需要解决两个非常重要的随机事件: 1.在一定范围内随机出各不相同但又不能互相重叠的房间 2.优 ...