美文网首页
响应式网页设计

响应式网页设计

作者: Yoga_71d3 | 来源:发表于2018-03-13 00:40 被阅读0次

    1.名词解释

    HTML5

    万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。

    CSS3

    CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新,因此通过采用模块方法,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性,这也让跨浏览器开发变得复杂。

    JavaScript

    1.是一种解释性脚本语言(代码不进行预编译)。

    2.主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。

    3.可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

    4.跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

    RWD

    响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、响应式布局媒介查询(CSS media query)的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

    响应式架构 responsive architecture

    超文本标记语言 HTML

    响应式网站设计 Responsive Web design

    响应式布局媒介查询 CSS media query

    2.statcounter数据图表分析为何需要响应式web设计

    根据市场调查机构 statcounter 的数据显示不同的屏幕有屏幕分辨率,这就说明了我们需要响应式网页设计来适应不同的屏幕分辨率,页面应该要有能力去自动响应用户的设备环境,就是网页内容应该随着访问它的视口及设备的不同而呈现不同的样式。

    3.有无使用响应式web设计的例子

    前不久优酷改版,而此次改版则使用了响应式设计方法,我们可以看以下几个页面:

    网页上的显示https://www.youku.com/

    手机客户端上的显示

    以下是没有使用响应式网页设计的实例

    bilibili网页版https://www.bilibili.com/

    手机网页版上的bilibili

    3.RWD的三项关键

    Ethan Marcotte在2010年发明了响应式Web设计,他在A List Apart上提到运用了三项已有技术:弹性网络布局、弹性图片/媒体、媒体查询。(http://www.alistapart.com/articles/responsive-web-design/)”。——摘抄自《响应式web设计基础》

    4.RWD和前後端的关系

    需要依赖后端方案的RWD:

    网页版、手机版、等等分开服务、设计、产出页面

    不需要依赖后端方案的RWD:

    网页版、手机版、等等一起服务、设计、产出页面

    基于HTML5和CSS3就可以制作不需要后端方案的RWD

    相关文章

      网友评论

          本文标题:响应式网页设计

          本文链接:https://www.haomeiwen.com/subject/xacafftx.html