git地址

一、媒体查询

max-width(最大宽度) （小于等于）

min-width(最小宽度) （大于等于）

@media(媒体特性){
    选择器{
        样式
    }
} 

媒体查询（css）层叠性：后面的属性覆盖前面的

• min-width(从小到大)

• max-width(从大到小)

完整写法

@media 关键词 媒体类型 and （媒体特性） {css代码}

关键词： and not only

css引入

格式

<link rel="stylesheet" href=" xx.css" media="（媒体特性： css样式）">

例子：

<link rel="stylesheet" href="./one.css" media="(min-width:992px)">
<link rel="stylesheet" href="./two.css" media="(min-width:1200px)">

隐藏效果

（之前） （当视口宽度小于768px左边消失）

  @media(max-width:768px) {
            .left {
                display: none;
            }
        }

（之后）

引入BootStrap框架(前端UI框架)

原因：自己写响应式布局比较累，因此引入框架

1、 下载BootStrap

www.bootcss.com/ ——>（点击）BootStrap3中文文档 ——>下载BootStrap ——>

解压后带dist的是要用到的文件，另一个是源码

2. 引入

（然后把文件全部拖拽到项目里即可）

<link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap.min.css"> （压缩版）

BootStrap栅格系统

（*占几份）

引入js插件

项目中遇到的问题

导航栏透明：

1. 使用组件实现导航效果

2. 删除代码保留想要的样式

3.实现透明效果