Bootstrap.pptx

Bootstrap
什么是响应式网页?
一个网页,可以根据浏览设备不同而呈
现出不同的布局方式,用户体验还是一样的好
响应式网页的构成:
(1)流式(Fluid)页面布局
(2)可伸缩的图片和文字
(3)使用CSS3 Media Query技术
如何测试一个响应式网页?
1,使用Chrome自带的设备模拟器做测试
2,使用真实的物理设备来测试
<meta name="viewport" content="width=device-width, initial-scale=1,
user-scalable=no">
视口是一个虚拟的概念,用于显示网页
内容的一个窗口,其宽和高都可以任意指定。
如何编写一个响应式网页
#所有尺寸和字体大小都不要用绝对单位,用相对
单位 em/rem
#使用浮动定位
#图片自适应
#CSS3媒体查询
CSS3 Media Query技术
Media:媒体,指浏览网页的设备,如screen(包括PC/PAD/PHONE),print,
Tv、braille(盲文设备)......
Query:查询,查询出当前浏览设备的物理特性,如width、height…
CSS3 Media Query技术:根据当前浏览设备类型、以及物理特性方面的不同,而
执行不同的CSS代码。
(1)根据媒体特性执行不同的外部CSS文件
<link media="screen and (min-width:768px) and (max-width:99
1px)" rel="" href=“">
只有媒体查询结果为真时,指定的外部样式文件才会被执行!
此方法有个缺陷:即使媒体查询失败的外部样式文件,也会被浏览器加载。
(2)在某段CSS样式声明中,只针对部分样式使用媒体查询
***@media screen and (min-width:768px) and (max-width:991px) {
选择器{
样式设定....
}
}
X-patible元标签的含义:
X: Cross 跨越 UA: UserAgent 用户代理,pitable:兼容性
此元标签是IE浏览器专用的元标签,其它浏览器会直接忽略。
IE6:
IE7: 同时兼容IE6
IE8: 同时兼容IE6、IE7
IE9: 同时兼容IE6、IE7、IE8
IE10: 同时兼容IE6、IE7、IE8、IE9
IE11: 同时兼容IE6、IE7、IE8、IE9、IE10
在新版本的IE中如何启用老IE的内核:
<meta http-equiv="X-pitable" content="IE=9/10/../edge">
<meta http-equiv="X-pitable" content="IE=edge">
EDGE: 边沿、最前端
: 由第三方开发的一个JS自调函数,用于让老版本的IE(<9)支持HTML5新标签
: 由第三方开发的一个JS自调函数,用于让老版本的IE(<9)支持CSS3MediaQuery
<!--[if lt IE 9]>
<script src="js/"></script>
<script src="js/"></script>
<![endif]-->
CSS Hack
HTML头部引用Hack
通过 IE 的条件注释来完成的
条件注释:
与html注释相似<!-- -->
if条件判断是否能够解析注释里的内容
gt : 选择条件版本以上的版本(不包含条件版本)
gt ie7
lt : 选择条件版本以下的版本(不包含条件版本)
lt ie8
gte :选择条件版本以及以上版本
gte ie7
lte : ITE IE8
! :选择条件版本以外的所有版本
! ie6