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开发变得快捷

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

使用：

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

书写内容：

直接拿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可以同时为一列制定多个设备的类名，以便划分不同份数，例如

使用时例如：占了6份

---

列嵌套

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

我们可以通过添加一个新的.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很少使用