Bootstrap响应式Web前端开发与实战.pptxVIP

第1章响应式网页设计;了解响应式设计的原理

理解ViewPort的概念

掌握媒体查询的基础知识

实现媒体查询的项目应用;引言;1.1

什么是响应式设计;1.1什么是响应式设计;1.1.1响应式原理;1.1.1响应式原理;1.1.1响应式原理;1.1.2响应式网页的优点和缺点;1.1.2响应式网页的优点和缺点;

响应式网页的缺点：

(1)旧版浏览器不支持

由于响应式设计需与CSS3新增的MediaQuery配合使用，因此旧版的浏览器并不支持响应式设计。

(2)加载速度慢

响应式网页在页面加载时需同时下载多份CSS文件为适配多种设备做准备，再根据读取的设备屏幕尺寸去匹配对应CSS文件。下载大量的CSS资源会降低网页的加载速度。;响应式网页的缺点：

(3)设计局限性

响应式网页并不适合大型企业的复杂性网站，大型网站的界面中内容较多，而响应式设计最忌讳布局复杂、内容烦琐，设计此类页面需要大量代码，代码过多会影响页面加载速度。

(4)开发时间较长

响应式网页需要兼容多种设备，因此对应的CSS内容必定是逻辑复杂的，开发所花费的时间必定会比开发一个普通网页的时间要长。

;响应式网页的缺点：

(3)设计局限性

响应式网页并不适合大型企业的复杂性网站，大型网站的界面中内容较多，而响应式设计最忌讳布局复杂、内容烦琐，设计此类页面需要大量代码，代码过多会影响页面加载速度。

(4)开发时间较长

响应式网页需要兼容多种设备，因此对应的CSS内容必定是逻辑复杂的，开发所花费的时间必定会比开发一个普通网页的时间要长。

;响应式网页的缺点：

(5)用户流量浪费

响应式网页统一加载页面中的图片和视频，当用户在配置较低的手机上加载不符合当前设备需求的图片或者视频时，将会过度消耗用户的流量。;1.2

Viewport;1.2Viewport;1.2Viewport;1.2Viewport;1.2Viewport;1.2.3理想视口（idealviewport）;1.2Viewport;1.2Viewport;1.2Viewport;1.3

媒体查询;1.3媒体查询;1.3媒体查询;1.3媒体查询;1.3媒体查询;1.3媒体查询;1.3媒体查询;1.3媒体查询;1.3媒体查询;1.3媒体查询;1.3媒体查询;1.3媒体查询;1.3媒体查询;1.3媒体查询;1.3媒体查询;1.3媒体查询;1.3媒体查询;!DOCTYPEhtml

html

head

metacharset=utf-8

metaname=viewportcontent=width=device-width,initial-scale=1,maxinum-scale=1.0,user-scalable=no

title图片自适应/title

/head

body

divid=box

imgsrc=./img/1.jpgalt=

imgsrc=./img/2.jpgalt=

imgsrc=./img/3.jpgalt=

/div

/body

/html

;1.3媒体查询;1.4实战--商品销售首页设计;1.4实战--商品销售首页设计;!DOCTYPEhtml

head

metacharset=UTF-8

metahttp-equiv=X-UA-Compatiblecontent=IE=edge

metaname=viewportcontent=width=device-width,initial-scale=1,maxinum-scale=1.0,user-scalable=no

linkrel=stylesheethref=./fontawesome/css/font-awesome.min.css

titleDocument/title

divclass=box

header

divclass=top

spanmenu/span

imgsrc=./img/qf.pngalt=/

ul

liahref=首页/a/li

以下省略重复性li代码

/ul

ahref=登录/a

/div

/header;代码实现;页面实现效果;页面实现效果;课后小结;第2章Bootstrap简介;了解Bootstrap的概念及发展

了解Bootstrap的优势及组成

掌握Bootstrap的安装与使