响应式布局与vw

# 响应式布局基础

## 响应式开发

同一个页面可以在移动端、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取值同样为屏幕宽高中最大值或最小值的百分之一