vw适配完成Web网页制作+响应式网页

（2）vw，vh适配方案：

vw,vh都是相对单位，相对于视口的尺寸计算结果

vw:viewport width(相对于视口宽度)

1 vw=1 /100 视口宽度

vh:viewport height(相对于视口高度)

1vh =1 / 100 视口高度

使用方法：（和rem适配一样需要用到less插件）

和rem适配不同：

vw单位的尺寸时1/100视口宽度，而rem单位的尺寸是等于html字号的大小（视口宽度的1/10）

vw不需要调整不同视口宽度下的html字号大小，因此不需要进行媒体适配或引入flexible.js文件。

注：

在开发中，vw、vh不能混用，因为vh是1/100视口高度，全面屏视口宽度尺寸大，如果混用可能会导致盒子变形。

与pc网页logo需要放置在<h1><a href="">网页名</a></h1>中不同，在移动端的logo标记不用放在h1标签中。

记录：在用li标签包裹img标签，放置显示图片时，需要给li设置宽高，后让img的宽高为父级的100%，后用object-fit:cover实现图片宽高等比放大的效果。

记录：background-size:contain;宽度和高度有一个方向相等就停止缩放 （在设置logo背景图时可设置）

六、响应式网页：

随着视口宽度在一定范围内的缩放，页面元素的布局发生响应式的变化

实现方法：

一、媒体查询（常用形式：@media (媒体特性) {css代码}）

媒体特性：

max-width：最大宽度

<!--例：当视口宽度小于等于768px时，body的背景颜色为绿色-->

min-width：最小宽度

<!--当视口宽度大于等于576px时，body的背景颜色为红色-->

书写顺序：（否则设置的属性有的会失效，由于css的层叠性）

min-width（视口宽度从小到大）

max-width （视口宽度从大到小）

例：当宽小于等于某个区域时，隐藏左侧：）—display：none；（可使块级元素消失）

媒体查询的完整写法：（了解）

媒体类型：（screen默认）

媒体特性：

外部css（可将媒体查询单独写）

二、Bootstrap框架

1.简介和使用

是需要调用指定的类名就能相对应的效果，还提供了轮播图，导航，警告，成功等常用样式的书写代码。（使用时复制修改即可） 

下载步骤：

注：要制作网页：下载生产文件，要看底层：下载源码

使用步骤：

2.BootStrap 栅格系统（可与媒体查询结合使用）

Bootstrap 5中，栅格系统划分了6个响应区间：0-576px 、576px-768px、 768px-992px、 992px-1200px、 1200px-1400px

视口范围--响应断点

引入Bootstrap的css文件后，可直接调用container类，实现版心效果：不同的相应区间，版心尺寸不同

由于版心宽度变窄，在flex布局的情况下，块级元素会相互挤在一起（其他布局也会有错乱的效果）

因此，在不同的宽度下，子级元素的排列方式也需要改变。

Bootstrap框架下调整不同响应区间的子级的排列方式：

要使子级排列方式不同，需要调用一下类前缀+份数（类名）

想要一行排列多个块标签，需要添加父级并使用row类（具有display:flex属性）

bootStrap-全局样式：

（1）Button类：

btn：默认样式

btn-success：成功

btn-warning：警告

。。。。

按钮尺寸

btn-lg/btn-sm

使用时可去Bootstrap官网查找使用

（2）表格类：

table：默认样式

table-striped：隔行变色

table-success：表格颜色

bootStrap-组件（Components）

使用组件：

1.引入样式表

2.引入js文件（动态效果）

3.复制结构，修改内容

字体图标

下载：