名词解释
响应式网页设计(RWD)
响应式网站设计(Responsive Web design)是一种网络页面设计布局,其主要是作用是集中创建页面的图片排版大小,智能地根据用户行为以及使用的设备环境进行相对应的布局。它是由Ethan Marcotte在2010年是发明的,他当时用了弹性网格布局、弹性图片/媒体、媒体查询,来实现了一个解决方案。
为什么需要响应式网页设计
随着移动互联网的到来,网民对网站提出了更高的要求,网站不仅需要满足电脑端客户的浏览需要,还需要考虑到网民通过移动手机、平板电脑来访问网站。网站就需要适应对平台的用户访问,所以需要的不是一个普通网站,需要一个响应式的网站。
这是过去一年手机、平板、台式机的使用情况,手机遥遥领先,而平板也有少量用户,所以,为了满足各种不同用户的需求,我们需要响应式网站。
网站例子
使用响应式的网站
哔哩哔哩弹幕网
没有使用响应式的网站
中山大学南方学院教务管理系统
RWD的三项组成科技
弹性网格布局
就是打开网站时,你可以缩放浏览器窗口,文本便会根据屏幕缩放自动重排。
弹性图片/媒体
运用创建CSS文件的方法,使用代码让图片会缩放占满最大的可用空间。
媒体查询
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。
RWD与前端的关系
前端:通常是指网站的前台部分。前端开发中最基本也是最必须的三个技能是HTML、CSS、JavaScript
·HTML是超文本标记语言 (Hyper Text Markup Language),是构建网页的基本元素
·级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。
·JavaScript要目的是为了解决服务器端语言,为网页提供了数据验证的基本功能。