响应式网页设计

名词解释

响应式网页设计(RWD)

响应式网站设计(Responsive Web design)是一种网络页面设计布局,其主要是作用是集中创建页面的图片排版大小,智能地根据用户行为以及使用的设备环境进行相对应的布局。它是由Ethan Marcotte在2010年是发明的,他当时用了弹性网格布局、弹性图片/媒体、媒体查询,来实现了一个解决方案。

为什么需要响应式网页设计

随着移动互联网的到来,网民对网站提出了更高的要求,网站不仅需要满足电脑端客户的浏览需要,还需要考虑到网民通过移动手机、平板电脑来访问网站。网站就需要适应对平台的用户访问,所以需要的不是一个普通网站,需要一个响应式的网站。


QQ浏览器截屏未命名.png

这是过去一年手机、平板、台式机的使用情况,手机遥遥领先,而平板也有少量用户,所以,为了满足各种不同用户的需求,我们需要响应式网站。

网站例子

使用响应式的网站

哔哩哔哩弹幕网

微信图片_20180311115113.jpg
1111fgg.png

没有使用响应式的网站

中山大学南方学院教务管理系统

假的.png

RWD的三项组成科技

弹性网格布局

就是打开网站时,你可以缩放浏览器窗口,文本便会根据屏幕缩放自动重排。

弹性图片/媒体

运用创建CSS文件的方法,使用代码让图片会缩放占满最大的可用空间。

媒体查询

媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。

RWD与前端的关系

前端:通常是指网站的前台部分。前端开发中最基本也是最必须的三个技能是HTML、CSS、JavaScript

·HTML是超文本标记语言 (Hyper Text Markup Language),是构建网页的基本元素

·级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。

·JavaScript要目的是为了解决服务器端语言,为网页提供了数据验证的基本功能。

RWD与后端的关系

后端:网站后端包括服务器、应用还有数据库。后端开发者构建并维护这些组件,为网站提供多方面支持。

Ethan Marcotte的网站

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、名词解释 名词引用自教科书——《响应式Web设计——HTML5和CSS3实战(第二版)》 响应式Web设计(R...
    GeekJun阅读 810评论 0 3
  • 名词解释: Web标准:WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structu...
    wo_jzf阅读 1,400评论 0 1
  • 名词解释 (来源:《响实》及网络) 响应式Web设计(Responsive Web Design): 简称RWD,...
    kkyyoo阅读 663评论 0 1
  • 名词解释 1、响应式web设计:响应式web设计可以让一个网站同时适配多种设备和多个屏幕,可以让网站的布局和功能随...
    Sugwa阅读 1,017评论 0 0
  • 名词解释 Internet:就是通常所说的互联网,是由一些使用公用语言相互通信的计算机连接而成的网络 WWW(Wo...
    你猜_42e0阅读 631评论 0 0