济南网站建设,网站运营维护,网站优化
小白入门您当前的位置:智达维网络科技 > 建站知识 > 小白入门 >

济南网站建设中的响应式Web设计

更新时间:2018-07-25 09:41:01 作者:千寻建站 访问量:59

济南网站建设中的响应式Web设计
济南网站建设中的响应式Web设计
1 响应式Web设计理念
    响应式网站设计(Responsive Web Design)的理念[6]是:页面设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对响应和调整。不论用户使用何种类型移动端或PC端,页面布局、图片大小及脚本功能等都能自动切换以适应不同设备,即页面能自适应用户的设备类型。响应式Web页面设计规避了移动端屏幕尺寸大小及操作系统的差异,使Web程序适应多类移动终端和PC端,具有操作系统平台的无关性、兼容性等特点,不必对不同版本进场专门设计、开发及维护。
2 响应式web设计核心技术
    响应式Web设计采用 HTML5+CSS+JavaScript模式。HTML5是万维网的核心语言、标准通用标记语言中的应用超文本标记语言 ,CSS是层叠样式表(CascadingStyle Sheets),是用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素格式化,同时还能对网页元素位置的排版进行像素级精确控制,支持几乎所有字体、字号样式,拥有对网页对象和模型样式编辑的能力。响应式Web设计整合了媒体查询、弹性视觉媒体和流动布局[7],媒体查询实现根据设备特性分级控制页面布局,使页面在不同终端设备中达到不同渲染效果,弹性视觉媒体按照特定布局进行动态调整,使用流动布局创建可缩放、可流动的弹性版式,三者构成了响应式设计的核心技术。
3 Bootstrap2.0响应式Web设计前端框架
    对Bootstrap2.0框架进行功能划分,主要分为框架(Scaffolding)、基础CSS、构件库和jQuery插件库。Scaffolding主要提供基于网格的各种布局,包括普通网格系统、嵌入式网格、固定布局、自适应布局,同时可以对网格和布局进行自定义。Bootstrap2.0提供响应式设计,通过单个文件支持各种手持设备,自适应不同设备和屏幕变化。
    基础CSS包括各种排版样式(标题、段落、引用块、列表、内联标签等),代码展示提供了基于code标签的内嵌代码,基于pre的块代码和基于Google Prettify的代码样式,同时提供各种表格、表单、按钮、图标的展示方式。构件库提供了基于按钮、导航、标签、排版、警告、进度栏、图像网格等控件。
    jQuery插件库提供十几种插件实现动态效果,例如Modal、Dropdown、Tab、Tooltip、Popover、Carousel等,开发者可以根据自己的业务需求使用不同插件实现各种动态效果。

    文章说明:本站发布的所有文章,版权均属于智达维网络科技。如需转载、摘编或利用其它方式使用上述作品,请注明“转载自:智达维网络科技”或“转载自:智达维网络科技/网站建设相关文章”,谢谢您的浏览!

相关推荐
热线:0531-87583458 电话:0531-66812586 QQ:2676834962
Copyright 智达维网络科技 版权所有
ICP备案编号:鲁ICP备11034527号-1 鲁公网安备 37010402000703号

扫二维码加微信咨询

拨打客服热线

0531-87583458

在线客服