# 响应式布局基础
## 响应式开发
同一个页面可以在移动端、iPad、PC端都可以显示
### 响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同的设备的目的
设备划分
超小屏幕(手机): (<768px)
小屏设备(平板): (>=768px ~ <992px)
中等屏幕(桌面显示): (>=992px ~ <1200px)
宽屏屏幕(大桌面显示): (>=1200px)
## 响应式布局容器
响应时需要一个父级作为布局容器,来配合子集元素实现变化效果
原理:
在不同屏幕下,通过媒体查询来改变这个布局容器的大小,在改变里面的子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化
布局容器宽度设置:
超小屏幕(手机): (<768px) 设置宽度为100%
小屏设备(平板): (>=768px ~ <992px) 设置宽度为750px
中等屏幕(桌面显示): (>=992px ~ <1200px) 设置宽度为970px
宽屏屏幕(大桌面显示): (>=1200px) 设置宽度为1170px
# Bootstrap基础
## Bootstrap简介
Bootstrap 是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的,它灵活简洁,使得Web开发更加迅捷
中文官网: http://www.bootcss.com/
官网: http://getbootstrap.com/
推荐使用: http://bootstrap.css88.com/
框架: 顾名思义就是一套架构,他有一套比较完整的网页功能解决方案,而且控制权在框架本身,有预制样式库、组件和插件。使用者要按照框架规定的某种规范进行开发
优点:
1. 标准化的html + css编码规范
2. 提供了一套简洁、直观、强悍的组件
3. 有自己的生态圈,不断地更新迭代
4. 让开发更简单,提高了开发的效率
## Bootstrap使用
控制权在框架本身,使用者按照框架所规定的某种规范进行开发
Bootstrap使用四部曲: 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容
```
<!-- 要求当前网页使用IE浏览器最高版本内核来渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- [if lt IE 9] -->
<!-- 解决IE9以下的浏览器对html5新增标签的不识别,并导致CSS不起作用的问题 -->
<script src="https://css.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"><script>
<!-- 解决ie9以下浏览器对CSS3 Media Query(媒体查询) 的不识别-->
<script src="https://css.maxcdn.com/respond/1.4.2/respond.min.js"><script>
<!--[endif] -->
```
### css使用方法
是通过类名控制的样式的
直接复制对应代码或者书写对应类名
若要修改其样式,利用层叠性覆盖
# Bootstrap布局容器
Bootstrap需要为页面内容和栅格系统包裹一个 .container (必须叫这个类名)容器,Bootstrap预先定义好了这个类,叫.container。它提供了两个作此用处的类
## container类
响应式布局的容器 固定宽度
大屏(>=1200px) 宽度定为1170px
中屏(>=992px) 宽度定为970px
小屏(>=768px) 宽度定为750px
超小屏(100%)
只需要用这个类名,媒体查询功能该框架已经写好了
## container-fluid类
流式布局容器 百分之百宽度
占据全部视口的容器
适合于单独做移动端开发
# Bootstrap栅格系统
栅格系统是指将页面 内容 划分为等宽的列,然后通过列数的定义来模块化页面布局
Bootstrap提供了一套响应式。移动设备优先的流式栅格系统,随着屏幕或视口尺寸的增加,系统会自动分为最多12列
Bootstrap里面container宽度是固定的,但是不同屏幕下,container的宽度不同,我们再将 container划分为12等份
## 栅格系统的参数
栅栏系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中
超小屏幕(手机) 小屏设备(平板) 中等屏幕(桌面显示器) 宽屏设备(大桌面显示)
<768px >=768px >=992px >=1200px
.container 自动(100%) 750px 970px 1170px
最大宽度
类前缀 .col-xs-份数 .col-sm-份数 .col-md-份数 .col-lg-份数
列(column)数 12
份数为占12份的份数,有行(row)之后就可以划分列(column)
如果孩子的分数相加小于12 则会占不满整个container
如果孩子的分数相加大于12 ,多余的那一列会另起一行
1. 行(row)必须放到container布局容器里面
2. 我们实现列的平均划分 需要给列添加 类前缀
3. xs-extra small:超小 ; sm-small:小; md-medium:中等; lg-large:大;
4. 列(column)大于12,多余的“列(column)”所有的元素将被作为一个整体另起一行排列
5. 每一列默认有左右15像素的padding
6. 可以同时为一列指定多个设备的类名,以便划分不同份数 例如 class="col-md-4 col-sm-6"
## 列嵌套
栅格系统内置的栅格系统将内容再次嵌套,简单的理解就是列内在分成若干小列。我们可以通过添加一个新的.row元素和一系列.col-sm-* 元素到已经存在的.col-sm-* 元素内
列嵌套最好加一个.row 这样就可以取消父元素的padding值,而且高度自动和父级一样高
## 列偏移
使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用 *(份数) 为当前元素增加的左侧的边距(margin)
使用的类名不是固定的,后缀一样就可以 *表示份数,下同
## 列排序
通过使用.col-md-push-* (往右) 和 .col-md-pull-* (往左) 类就可以很容易的改变行(column)的顺序
## 响应式工具
为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同的设备展示或隐藏页面内容
类名 超小屏 小屏 中屏 大屏
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏
与之相反的,是visible-xs visible-sm visible-md visible-lg 是在某屏幕尺寸显示某个页面内容
# vw/vh介绍
是相对单位
相对 视口的尺寸 计算结果
vw: viewport width
1vw=1/100视口宽度
vh: viewport height
1vh=1/100视口高度
开发中,vw和vh不会混用,一般都用vw
# vw与vmin的区别
vmin主要是为了适用于横屏与竖屏切换问题
当使用vw时,在横屏时会出现大小分配不合适的问题,而vmin则可以很好的解决这个问题
## vmin和vmax是取当下屏幕的宽度和高度中的最大值或最小值
1 vmin和1 vmax取值同样为屏幕宽高中最大值或最小值的百分之一