响应式布局

响应式开发

媒体查询

语法：

宽度的变化
max-width(从小到大)
min-width（从大到小）
@media () {
    选择器{
        
    }
}

基本使用：

@media (max-width: 700px) {
    body{
        background-clolor: pink;
    }
}
@media (min-width: 1400px) {
    body{
        background-clolor: skybule;
    }
}

link写法：

<link rel="stylesheet" href="" media="(min-width: 1400px)">

Bootstrap框架

下载

https://www.bootcss.com

引入

<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">\

调用

container:(响应式布局版心类)

​ 版心居中

​ 自带间距15px

row类

​ 自带间距-15px

container-fluid

​ 宽度100%

​ 自带间距15px

栅格系统布局：

​ 默认把网页分成12等份

	超小屏	小屏	中屏	大屏
响应断点	<768px	>=768px	>=992px	>=1200px
别名	xs	sm	md	lg
容器宽度	100%	750px	970px	1170px
类前缀(* = 12/())	col-xs-*	col-sm-*	col-md-*	col-lg-*
列数	12	12	12	12
列间隙	30px	30px	30px	30px

bootstrap文档使用