540节---------5月18日-----移动端web开发结束

目录

响应式布局

• 响应式开发的原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的
• 响应式布局容器

Bootstrap前端开发框架

• 布局容器
• 1.container类
• 2.container-fluid
• 栅格系统
• 栅格选项参数
• 列嵌套
• 列偏移
• 列排序
• 响应式工具

Vw/Vh布局

• vw/vh是一个相对单位（类似em和rem相对单位)
• 相对视口的尺寸计算结果
• 在开发中如何使用vw
  • 还原设计稿

---

响应式布局

响应式开发的原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

设备划分	尺寸区间（px）
超小屏幕（手机）	<768
小屏设备（平板）	>=768 ~ <992
中等屏幕（桌面显示器）	>=992 ~ <1200
宽屏设备（大桌面显示器）	>=1200

响应式布局容器

响应式需要一个父级作为布局容器，来配合自己元素实现变化效果

原理：在不同的屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化

设备划分	设置宽度
超小屏幕（手机）	100%
小屏设备（平板）	750px
中等屏幕（桌面显示器）	970px
宽屏设备（大桌面显示器）	1170px

---

Bootstrap前端开发框架

bootstrap来自twitter，是目前最受欢迎的前端框架。是基于html、css、js的，使web开发变得快捷

框架：顾名思义就是一种架构，他有一套比较完整的网页功能解决方案。而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

使用：

1. 创建文件夹结构
2. 创建Html骨架结构
3. 引入相关样式文件
4. 书写内容

书写内容：

• 直接拿bootstrap预先定义好的样式来使用
• 修改Bootstrap原来的样式，注意权重问题
• 学好bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

---

布局容器

bootstrap需要为页面内容和栅格系统播爱国一个.container容器，bootstrap预先定义好了这个类，叫.container，它提供了两个作此用处的类

1.container类

• 响应式布局的容器      固定宽度
• 大屏(>=1200px)宽度定为1170px
• 中屏(>=992px)宽度定为970px
• 小屏(>=768px)宽度定为750px
• 超小屏(100%)

2.container-fluid

• 流式布局容器     百分百宽度
• 占据全部视口的容器
• 适合单独做移动端开发

---

栅格系统

是指将页面布局划分为等款的列，然后通过列数的定义来模块化页面布局

bootstrap提供了一套响应式、移动设备有线的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。

栅格选项参数

用于通过一系列的行和列的组合来创建页面布局，就可以放入这些创建好的布局中

• 行必须放到container布局容器里
• 我们实现列的平均划分，需要给列添加类前缀
• xs-extra small：超小；sm-small：小；md-medium：中等；lg-large：大
• 列大于12，多余的列所在的元素将被作为一个整体另起一行排列
• 列小于12，占不满整个container宽度，会有空白
• 每一列默认有15像素的padding
• 可以同时为一列制定多个设备的类名，以便划分不同份数，例如class="col-md-4 col-sm-6 "

使用时例如：<div class="col-lg-6">占了6份</div>

---

列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。

我们可以通过添加一个新的.row元素（去掉父元素的padding，且高度和父元素保持一致）和一系列的.col-sm-*元素到已经存在的.col-sm-*元素内。

---

列偏移

使用.col-md-offset-*类可以将列向右偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin）。

---

列排序

通过使用.col-md-push-*（向右推）和.col-md-pull-*（向左拉）类就可以改变列的顺序

---

响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同的设备展示或隐藏页面内容

如：

---

Vw/Vh布局

vw/vh是一个相对单位（类似em和rem相对单位)

• vw是: viewport width视口宽度单位
• vh是: viewport height视口高度单位

相对视口的尺寸计算结果

• 1vw = 1/100视口宽度
• 1vh = 1/100视口高度

例如：当前屏幕视口是375像素，则1vw就是3.75像素

注意：和百分比是有区别的，%是相当于父元素来说的，而vw和vh总是针对于当前视口来说的。

在开发中如何使用vw

• 开发中使用vw，需要把像素大厨的模式改为2x模式

• 还原设计稿

  • 确定设计稿视口宽度（比如375）
  • 直接用测量到的数值 /（视口宽度/ 100）
  • 比如：50 / （375 / 100）

注意事项：

• 因为涉及到大量除法，适应lexx搭配更好点
• 本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所以在开发中使用vw就基本足够了，vh很少使用