响应式网页设计

  • 响应式WEB设计即 RWD(Responsive Web Design)
  • “响应式WEB设计”这个名字是Ethan Marcotte在2010年发明的。当时,他在A List Apart上写了一篇文章,这篇文章综合运用了三种已有技术(弹性网格布局(fluid grid)、弹性图片/媒体(flexible images)、媒体查询(media queries))实现了一个解决方案,就叫“响应式Web 设计”
  • 基于HTML5CSS3
  • “响应式web设计”是指网页内容会随着访问它的视口(Viewport)设备(Device)的不同而呈现不同的样式(Style)。
  • 形象一点的说,就是将同样的内容装载到不同大小的容器中,并与之适应。就像水装在不同的容器里一样,是流动的,可灵活变化的。

为何需要响应式设计?

响应式设计可以让一个网站同时适配多种设备和多个屏幕,可以让网站的布局和功能随用户的使用环境(屏幕大小、输入方式、设备/浏览器能力)而变化。

以下为 (互联网与新媒体)市场调查机构 statcounter 的数据

全球屏幕分辨率统计(2017.2 - 2018.2)

全球桌面与移动与平板电脑市场份额(2017.2 - 2018.2)
全球浏览器市场份额(2017.2 - 2018.2)
  • 从以上三个图表可以看出,用户使用的设备以及对浏览器的选择呈现多样化趋势。
    从屏幕分辨率看,使用360x640和1366x768的用户稍多,但仍未超过30%,用户的选择很零散。
    从桌面与移动与平板电脑的市场份额来看,PC端用户与移动端的用户比例不相上下,同样占有巨大的市场份额。
    从浏览器的比例而言,Chrome的用户比例占比最高,但也有一部分用户使用其他浏览器。
  • 因此响应式Web设计很有需要,它既可以满足用户在不同端口接入的需求,为用户提供更良好的使用体验,也不需要依赖后端方案。

基于HTML5和CSS3的RWD不需要依赖后端方案,可以同时为网页端和手机端服务、设计、产出页面。

前端(frontend),前端开发主要做的是用户所能看到的前端展示界面
后端(backend),后端开发主要做的是逻辑功能等模块,是用户不可见的。

前端-->网页伺服器<-->API伺服器<--后端数据库/云端

有无使用响应式设计对比

屏幕分辨率/网页 有无
中山大学新华学院官网
小分辨率
大分辨率
吉林大学珠海学院官网
小分辨率
大分辨率
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、名词解释 名词引用自教科书——《响应式Web设计——HTML5和CSS3实战(第二版)》 响应式Web设计(R...
    GeekJun阅读 866评论 0 3
  • 名词解释: Web标准:WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structu...
    wo_jzf阅读 1,465评论 0 1
  • 响应式网页设计 定义: 响应式Web设计(Responsive Web design)是:页面的设计与开发应当根据...
    little_bottle09阅读 774评论 0 4
  • 什么是响应式Web设计? “响应式Web设计”这个名字是Ethan Marcotte在2010年发明的。当时,他在...
    村东有只羊咩咩在吃草欸阅读 549评论 0 0
  • 名词解释 (来源:《响实》及网络) 响应式Web设计(Responsive Web Design): 简称RWD,...
    kkyyoo阅读 691评论 0 1

友情链接更多精彩内容