Bootstrap响应式适配原理

1 首先要了解BT分四个核心部分

Layout ——布局 ~包含栅格系统~属于BT

栅格系统是实现响应式的关键

Content——内容~文字列表标题表单等等

Components——组件~不同的功能组件~警告框按钮轮播图下拉组件模态框

Utilities —— 工具部分~修饰性颜色浮动定位边框阴影间距

另外注意

Extend——扩展~字体图标按钮日历~属于第三方库跟插件

2 响应式的特点

a 网页随着设备屏幕宽度调整，自动适应，且布局改变

b 不用绝对宽度设置，而使用百分比

c 使用浮动、弹性布局

d 字体使用相对设置，如rem、em

rem —— root em 以根节点字体设置大小为基本单位进行设置

字体设置案例：

<html>
<head>
    <meta charset="UTF-8">
<title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
html{
font-size:60px;
}
p{
font-size:2rem;
}
.p2{
font-size:0.5rem;
}
</style>
</head>
<body>
头号灵感
铁象建站

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</body>
</html>

以上代码中根节点的字体大小设置不是固定的，而是根据屏幕大小自动配置。设备屏幕大小是依靠媒体查询来，如此在不同屏幕上才能匹配合理的字体大小。由此我们看——媒体查询。

3媒体查询 @media

根据一个或者多个基于设备类型、具体特点和环境来应用样式。

1 媒体类型

all 所有设备

print 打印机设备

screen 彩色电脑屏幕

speech 听觉设备（针对有视力障碍得人，可以把页面内容以语音形式传达）

媒体查询语法 @media 条件 {生效内容}

@media all{

div {

font-size:3rem;

}

稍微复杂：

@media all and（min-width：400px）{

div{

font-size:100px;

}

@import中使用@media

@import url('css/bootstrap.css') (min-width:200px);

link标签中使用

@规则总结

@media 媒体查询

@chartset 定义编码

@import 引入css文件（css模块化）

@font-face 自定义字体

@keyframes animation里的关键帧

代码练习：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>Document</title>
    <style>
div{
width:300px;
height: 300px;
background: red;
font-size: 100px;
}
@media print{
div{
font-size: 300px;
border: 10px solid #000;
}
}
@media screen{
div{
width:100%;
height:50%;
font-size: 500px;
}
}
</style>
</head>
<body>
    头号灵感
</body>
</html>

2 媒体特性

width 宽度

min-width max-width

height 高度

min-height max-height

orientation 方向

landscape 横屏——宽度大于高度

portait 竖屏——高度大于宽度

aspect-ratio 宽度比

-webkit-device-pixel-radio 像素比(webkit内核的素有属性)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>Document</title>
    <style>
div{
width:300px;
height: 300px;
background: red;
}
/* 屏幕尺寸大于1000时候满足 */
@media (min-width:1000px){
div{
font-size: 100px;
border: 10px solid #000;
}
}
@media (orientation:landscape) {
div{
width:400px;
height: 800px;
}
}
@media (orientation:portrait) {
div{
width:800px;
height: 800px;
}
div:after{
content: '头号灵感';
font-size: 200px;
color: rgb(246, 246, 246);
}
}
</style>
</head>
<body>
    铁象建站
</body>
</html>

3 逻辑运算符——用来进行逻辑判断

and 合并多个媒体类型-并且的意思

, 匹配某个某媒体查询

not 对媒体查询结果取反

only 仅在媒体查询匹配成功后应用样式——用来防范老旧浏览器的直接执行

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>Document</title>
    <style>
div{
width:300px;
height: 300px;
background: red;
}
/宽度大于700像素且屏幕为横屏的时候/
@media all and (min-width:700px) and (orientation:landscape) {
div{
background-color: blue;
}
}
/宽度小于700像素或者是横屏的时候/
@media (max-width:700px) , (orientation:landscape) {
div{
background-color: rgb(0, 158, 13);
}
}
/宽度大于500像素的时候才满足/
@media not all and (max-width:500px) {
div{
background-color: rgb(198, 226, 39);
}
}

</style>
</head>
<body>
    测试逻辑运算符
</body>
</html>