移动WEB学习 - 响应式网页开发

一、媒体查询

1、基本语法

• 开发常用写法
  • 媒体特性常用写法
    • max-width （数值从大到小）
    • min-width （数值从小到大）
• 完整写法
• 外链式CSS引入

二、BootStrap

1、简介

• BootStrap是由Twitter公司开发维护的前端UI框架，他提供了大量的编写好的CSS样式，允许开发者结合一定的HTML结构及JavaScript，快速编写功能完善的网页及常见交互效果
• 中文官网：http://www.bootcss.com/

2、使用步骤

• 引入：BootStrap提供的CSS代码

• 调用类：使用BootStrap提供的样式
• container:响应式布局版心类

3、栅格系统

• 栅格化是指整个网页的宽度分成若干份
• BootStrap3默认是将网页等分成12等份

  	超小屏幕	小屏幕	中等屏幕	大屏幕
  响应断点	< 768px	>= 768px	>= 992px	>= 1200px
  别名	xs	sm	md	lg
  容器宽度	100%	750px	970px	1170px
  类前缀	col-xs-*	col-sm-*	col-md-*	col-lg-*
  列数	12	12	12	12
  列间隙	30px	30px	30px	30px

• .container是BootStrap中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中

• .container-fluid也是BootStrap中专门提供的类名，所有应用该类名的盒子，宽度均为100%

• 分别使用.row类名和.col类名定义栅格布局的行和列

• 注意：

  • container类自带间距15px

  • row类自带间距-15px