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——文本两端调整对齐；