【Web前端学习之路】web进阶（移动web）黑马课程笔记04

1、vw/vh

使用vw/vh单位设置网页元素的尺寸，完成移动适配。

vw/vh也是相对单位，是相对视口的尺寸计算的结果。

vw:viewport width，取值为视口宽度的1/100

vh：viewport height，取值为视口高度的1/100

注：在同一个元素中，宽高的单位不要混用vw/vh单位，最好都用vw，或者都用vh 因为全面屏的影响可能是缩放不是同比例

补充：rem与vw/vh的区别在于，rem是相对于页面根标签字号大小而言的单位，需要引入媒体查询视口大小，从而确定根标签字号（后引入flexible.js）；而vw/vh是直接相对于视口大小而言的单位，并不需要另外引入js文件。

2、响应式网页

响应式网页：一套代码可以适配各种屏幕、各种设备，页面布局会改变。

媒体查询 max-width/min-width(选择的是范围，与rem知识点中的媒体查询区分)

 媒体查询的书写顺序：只要是css样式都具有层叠性

上述媒体查询若变换书写顺序，则当视口宽度为大于等于1200像素时，背景也是绿色的 

min-width书写顺序：从小到大

max-width书写顺序：从大到小

描述媒体类型的其他具体特征：

 ！link引入媒体查询：即通过媒体查询引入不同的css文件

3、BootStrap框架

框架：提前封装好的代码，供开发者直接使用。

Bootstrap是推特公司开发维护的前端UI框架，提供了大量编写好的CSS样式，允许开发者结合一定HTML结构及JavaScript，快速编写功能完善的网页及常见的交互效果。

下载网址：https://www.bootcss.com/

使用BootStrap步骤

1、引入BootStrap提供的CSS代码（bootstrap.css也可以，二者功能相同，.min.css是经过格式化之后的文件，压缩体积小，做项目时更推荐使用）

 2、调用类：使用BootStrap提供的样式

.container:响应式布局版心

.row：自带间距-15px

 

 注意：.row类应在.container类内再取一个元素，若与.container类元素同级写，则会将.container的居中效果一并层叠。

 .container-fluid:使得元素宽度为100%

BootStrap栅格系统

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

 

 lg:

 md

 sm

 xs

注：栅格化是使每个元素占整个宽度的若干等份，所以不可以给元素另外加外边距（这样总和就超过100%）

 如果想要视觉效果上每个元素隔开，其实是由其中的内容效果完成的

BootStrap框架使用的是float属性，兼容性好。

BootStrap手册

BootStrap3中文文档  -》 全局css样式  -》 按分类导航查找目标

还可以使用BootStrap里的组件、JavaScript等，若BootStrap的默认效果不符要求，可以再自己定制一个压缩文件用于使用。

企业网站或是内容很少的网页适合改版为响应式网页。