1、响应式网页：
①Responsive Web Page：一个可以根据浏览设备的不同，而自动更改布局、图片、文字效果的网页；
②构成：不能固定宽度，必须流式布局；文字和图片大小随容器大小而改变；CSS3 Media Query；
2、响应式网页编写：
①必须声明viewport元标签：
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
* 避免用户左右滑动屏幕，禁止浏览器初始时缩放显示；
②容器的宽度尽量不使用固定值（px），使用相对宽度（%或auto）；
③文字尽量不使用绝对尺寸（px），使用相对尺寸（em或rem）；
④图片要指定大小，如：
img{
max-width:100%;/*随容器缩小，但最大不会超过图片原始大小——防止失真*/
}
⑤页面布局时不能固定，采用流式布局，如浮动，inline-block；
⑥灵活使用CSS3 Media Query技术——响应式网页必备元素！
3、CSS3 Media Query技术：
①Media：指浏览网页的设备，如screen、tv、projection、tty（字符终端）、print、braille、speech等；
②Query：指自动获取当前浏览设备物理特性，如色彩深度、orientation、width、height等；
③CSS媒体查询技术：可以根据浏览设备的类型及特性，执行不同的CSS代码；
④CSS3 Media Query两种用法：
a、根据媒体查询结果，执行不同的外部CSS文件：
<link media="screen and (max-width:991px) and (min-width:768px)" rel="stylesheet" href="css/pad.css"/>
不足：当前设备不执行的CSS文件也会被浏览器加载，每个CSS文件可能存在很多重复代码；
b、在一个CSS片段中，有选择的执行某些选择器：
@media screen and (min-width:768px) and (max-width:991px){
选择器{属性名：值}
}
4、BootStrap模板：
①<html lang="zh-cn">
HTML标签的lang属性（language），用于指定当前网页的自然语言（可取值zh-cn、en、en-us、ja等）；
作用：为浏览器翻译功能指明原始语言；为屏幕阅读软件指明应该使用的发音；
②<meta http-equiv="X-UA-Compatible" content="IE=dege">
HTTP响应消息头部：X-UA-Compatible；
Cross-UserAgent-Compatible：IE浏览器专用头部，告诉新版本的IE兼容哪个版本的内核，edge表示启用能够使用的最新的版本内核；
5、BootStrap全局CSS样式：
①按钮相关Class：
.btn——按钮基础样式；
.btn-default——白底黑字按钮；
.btn-danger——红色按钮；
.btn-warning——黄色按钮；
.btn-success——绿色按钮；
.btn-info——浅蓝色按钮；
.btn-primary——深蓝色按钮；
.btn-lg——大号按钮；
.btn-sm——中号按钮；
.btn-xs——小号按钮；
.btn-block——块级按钮；
②图片相关Class：
.img-circle——圆形图片；
.img-rounded——圆角图片；
.img-thumbnail——缩略图片；
.img-responsive——响应式图片；
③文本相关Class：
.text-danger/warning/success/info/primary——五种文本颜色；
.bg-danger/warning/success/info/primary——五种文本背景颜色；
.text-uppercase——文本转换为大写形式；
.text-lowercase——文本转换为小写形式；
.text-capitalize——文本转换为首字母大写形式；.text-left——文本左对齐；
.text-center——文本居中对齐；
.text-right——文本右对齐；
.text-justify——文本两端调整对齐；
原标题：BootStrap_01之全局样式
关键词：
我知道了 