CSS查缺补漏之《媒体查询@media与BFC》

示例代码如下：

<div class="box">世界你好</div>

.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
  color: white;
  font-size: 24px;
  text-align: center;
  line-height: 200px;
}

 

媒体类型

媒体类型允许指定文件将如何在不同媒体上呈现，使用媒体类型，可以指定一个媒体查询和一个cdd块，主要有以下几种类型：

all：检测所有设备

screen：检测电子屏幕，包括电脑屏幕、平板屏幕、手机屏幕等

print：检测打印机或打印预览模式

语法如下：

@media 媒体类型
{
    /* 正常写代码样式 */
}

@media print {
      /* 在打印机设备上或在打印预览时显示如下样式 */
      .box {
        background-color: blue;
        color: black;
        text-decoration: 1px solid orange;
        text-align: center;
      }
    }

 

媒体特性

媒体特性（media feature）描述了用户代理、输出设备或环境的具体特性。

媒体特性表达式是完全可选的，其用于检测这些特征是否存在指定值，每个媒体特性表达式都必须用括号括起来~

常见的媒体特性表达式如下：

width： 检测视口宽度

height： 检测视口高度

min-width：检测视口最小宽度

min-height： 检测视口最小高度

max-width：检测视口最大宽度

max-height：检测视口最大高度

device-width：检测设备屏幕的宽度；

max-device-width：检测设备屏幕的最大宽度；

min-device-width：检测设备屏幕的最小宽度；

orientation：检测视口的旋转方向（是否横屏）

        portrait 视口为纵向，即高度大于等于宽度；

        landscape：视口为横线，即宽度大于高度；

@media (min-width: 600px) {
      /* 在所有媒体介质上宽度大于等于600px时显示如下样式 */
      .box {
        background-color: orange;
      }
    }

如在电脑屏幕上，拖动屏幕宽度时，若宽度大于等于800时，背景颜色变为orange；宽度小于800时是黄色；

   

@media (device-width: 1366px) {
      /* 在宽度为1366px的设备上显示如下样式 */
      .box {
        background-color: gray;
      }
    }

媒体查询操作符

逻辑操作符，包含and（与）、or（或）、not（非）、only（仅仅）；

 @media screen and (min-width: 600px) {
      /* 在屏幕宽度大于600px的设备上显示如下样式 */
      .box {
        background-color: orange;
      }
    }

上述代码在打印机或打印预览情况下即使宽度大于600也不显示上述效果；

@media not screen {
      /* 在非屏幕类设备上显示如下样式 */
      .box {
        background-color: orange;
      }
    }

上述代码在非屏幕类设备上才显示效果~

或逻辑运算符也可以使用，关联，下述两段代码都可在小于200px或者大于800px的设备实现效果

@media (min-width: 800px) or (max-width: 200px)  {
      /* 在小于200px或者大于800px的设备上显示如下效果 */
      .box {
        background-color: orange;
      }
    }

@media (min-width: 800px), (max-width: 200px)  {
      /* 在小于200px或者大于800px的设备上显示如下效果 */
      .box {
        background-color: orange;
      }
    }

媒体查询使用方式

由于可以对不同的媒体设备或规格进行不同的样式定义，除上述方式在对应页面使用外，可通过link标签引入方式；

通过link标签引入方式，利用media属性设置媒体类型

<link rel="stylesheet" media="具体的媒体查询" href="xxx.css文件">

<!-- 在屏幕宽度为1024px的设备上加载如下样式 -->
  <link rel="stylesheet" media="screen and (width: 1024px)" href="xxx.css文件">

<!-- 在屏幕宽度最大为600px的设备上加载smallscreen.css样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

在xxx.css文件中正常写样式即可~

BFC

BFC(Block Formatting Context，块格式化上下文)是Web页面的可视css渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其它元素交互的区域~

上述解释见mdn块格式化上下文 - Web 开发者指南 | MDN

简言之，某元素通过设置某种样式（满足某些条件），使其产生一些特定影响（解决一些问题），则称该元素开启了BFC(创建了BFC)

开启BFC后可以解决哪些问题（产生哪些影响）？

① 元素开启BFC后，其子元素不会再产生margin塌陷问题。

② 元素开启BFC后，自己不会被其它浮动元素所覆盖。

③ 元素开启BFC后，就算其子元素浮动，元素自身高度也不会塌陷

设置哪些样式可以开启BFC？

① 根元素

② 浮动元素

③ 绝对定位或固定定位的元素

④ 行内块元素

⑤ 设置display为table或flow-root

⑥ overflow为非visible的块元素⑦

⑦ 伸缩项目（即设置了display为flex的子元素）

⑧ 多列容器（即设置column-count的元素）

⑨ 设置column-span为all的元素（即使该元素没有包裹在多列容器中）

可以验证，在分别设置上述样式后，均可以解决上述所述的三个问题~

验证一：可以解决margin塌陷问题

如下示例代码会产生margin塌陷问题（第一个子元素margin-top与最后一个子元素的margin-bottom都给了父元素）

<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
</div>
<div>我是测试代码</div>

.box {
  background-color: rgba(255, 255, 0, 0.647);
  width: 400px;
}
.box1 {
  width: 100px;
  height: 100px;
  background-color: rgba(255, 34, 0, 0.647);
  margin-top: 50px;
}
.box2 {
  width: 100px;
  height: 100px;
  background-color: rgba(0, 255, 21, 0.607);
  margin-bottom: 50px;
}

① 设置浮动，塌陷问题解决~

.box {
  background-color: rgba(255, 255, 0, 0.647);
  width: 400px;
  /* 设置左浮动 */
  float: left;
}

 

② 设置固定、绝对定位，问题解决~

.box {
  background-color: rgba(255, 255, 0, 0.647);
  width: 400px;
  /* 设置定位 */
  position: absolute;
}

③ 变为行内块元素，问题解决~

.box {
  background-color: rgba(255, 255, 0, 0.647);
  width: 400px;
  /* 变为行内块元素 */
  display: inline-block;
}

④ 设置为table，问题解决~

.box {
  background-color: rgba(255, 255, 0, 0.647);
  width: 400px;
  /* 变为table */
  display: table;
}

⑤ 设置overflow为非visible值，问题解决~

.box {
  background-color: rgba(255, 255, 0, 0.647);
  width: 400px;
  /* overflow变为非visible值 */
  overflow: hidden;
}

⑥ 使该元素成为伸缩项目,问题解决~

body {
  /* 使box成为伸缩项目 */
  display: flex;
}
.box {
  background-color: rgba(255, 255, 0, 0.647);
  width: 400px;
}

 

⑦ 设为多列容器，问题解决~

.box {
  background-color: rgba(255, 255, 0, 0.647);
  width: 400px;
  /* 设置为多列容器，且为1列 */
  column-count: 1;
}

 

⑧ 设置column-span为all，问题解决~

.box {
  background-color: rgba(255, 255, 0, 0.647);
  width: 400px;
  /* 使元素没有包裹在多列容器中 */
  column-span: all;
}

⑨ 设置dispaly为flow-root，问题解决~

.box {
  background-color: rgba(255, 255, 0, 0.647);
  width: 400px;
  /* 设置display为flow-root */
  display: flow-root;
}

 

tips：flow-root可产生一个块级元素盒，其会建立一个新的BFC(块级格式化上下文)。

---

验证二：不会被其它浮动元素覆盖

代码示例如下，如下代码box1设置浮动后，兄弟元素box2会被box1所覆盖~

<div class="box1"></div>
<div class="box2"></div>

.box1 {
  width: 150px;
  height: 100px;
  background-color: red;
  float: left;
}
.box2 {
  width: 100px;
  height: 100px;
  background-color: green;
}

 

① 设置浮动，问题解决~

.box2 {
  width: 100px;
  height: 100px;
  background-color: green;
  float: left;
}

 

 ② 设置定位，问题解决~

.box2 {
  width: 100px;
  height: 100px;
  background-color: rgba(0, 255, 21, 0.607);
  position: absolute;
}

③ 设置为行内块元素，问题解决~

.box2 {
  width: 100px;
  height: 100px;
  background-color: green;
  display: inline-block;
}

 

④ 设置为display为table

.box2 {
  width: 100px;
  height: 100px;
  background-color: green;
  display: table;
}

 

⑤ 设置display为flow-root

.box2 {
  width: 100px;
  height: 100px;
  background-color: green;
  display: flow-root;
}

 

⑥ 设置overflow为非visible的块元素

.box2 {
  width: 100px;
  height: 100px;
  background-color: green;
  overflow: auto;
}

⑦ 设置为伸缩项目

body {
  display: flex;
}

 

⑧ 设置为多列容器

.box2 {
  width: 100px;
  height: 100px;
  background-color: green;
  column-count: 1
}

 

⑨ 设置column-span为all

.box2 {
  width: 100px;
  height: 100px;
  background-color: green;
  column-span: all
}

---

 验证三：元素开启BFC后，就算其子元素浮动，元素自身高度也不会塌陷

 示例代码如下，下述代码在子元素设置浮动后，自身高度为0（塌陷）

<div class="box">
  <div class="box1"></div>
</div>

.box {
  width: 200px;
  background-color: yellow;
}
.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  float: left;
}

 

① 设置浮动，问题解决

.box {
  width: 200px;
  background-color: yellow;
  float: left;
}

 

② 设置定位，问题解决

.box {
  width: 200px;
  background-color: yellow;
  float: fixed;
}

 

③ 设置为行内块元素，问题解决

.box {
  width: 200px;
  background-color: yellow;
  display: inline-block;
}

④ 设置display为table

.box {
  width: 200px;
  background-color: yellow;
  display: table;
}

 

⑤ 设置display为flow-root

.box {
  width: 200px;
  background-color: yellow;
  display: flow-root;
}

 

⑥ 设置overflow为非visible

.box {
  width: 200px;
  background-color: yellow;
  overflow: scroll;
}

 

⑦ 变为伸缩项目

body {
  display: flex;
}

 

⑧ 设置column-count

.box {
  width: 200px;
  background-color: yellow;
  column-count: 1;
}

 

⑨ 设置column-span为all

.box {
  width: 200px;
  background-color: yellow;
  column-span: all;
}

 

以上所有例子都可以实现开启BFC，虽然也会产生其它影响~

补充：

column-count与column-span多用于多列布局样式中使用~

column-count：用于设置列数，值为数字。只设置了列数，则会自动计算列宽

column-width：用于设置每一列的宽度,值为长度+px。只设置了列宽，则会自动计算列数

columns: 为列数和列宽的复合属性，能同时制定列宽和列数

column-gap：表示列与列的间距，值为长度+px，默认为10px

column-rule-width： 表示每列的边框宽度

column-rule-style：表示每列的边框线性，solid、dotted等

column-rule-color：表示每列的边框颜色

column-rule为列边款宽度、边款颜色、线性的复合属性，用法有border一样；

column-span：用于指定是否跨列显示，可选值有none（默认）、all（跨所有列）

以最爱的《晴天》为例，

<div class="box">
  <div class="title">晴天</div>
  <div class="title title-sub">以下摘自百度百科</div>
  <div class="p">《晴天》是周杰伦作词、作曲、编曲并演唱的歌曲，收录在周杰伦2003年7月31日发行的专辑《叶惠美》中。</div>
  <div class="p"> 2003年，该曲获得“第十届全球华语音乐榜”港台地区最佳歌曲奖 [1] 。2005年，获得“第四届全球华语歌曲排行榜”年度最受欢迎金曲奖 [2] 。</div>
  <div class="p">《晴天》这首歌曲是周杰伦的内心独白。在创作《晴天》时，周杰伦用一种孤独的内心感受展现了一种细腻和内敛的伤感和脆弱。他所写的内容与方文山营造的神奇诡异不同，更贴近现实和自己内心。该歌曲讲述的是怀念校园的点滴，一起约定，等到放晴的那天，共同来谱一段纯纯的爱。</div>
  <img src="./1687335000873.jpg" alt="">
  <div class="p">《晴天》是一首偏校园怀旧风的Britpop歌曲。这是首浪漫的少年情歌，有风花雪月，更多的是怅然若失，很散文诗式的情怀，用周杰伦的方式演绎，就更带点伤感。这首歌将回忆的思绪充分放大，校园时代的青涩，甜美纯真的爱情，桀骜不驯的叛逆，在这首歌里全都有体现。MV中的大提琴演奏将旋律升华到艺术的气质，最后的rap更是增加了周杰伦独特的情歌特色</div>
  <div class="p">《晴天》MV是在淡水取景拍摄的，由赖薇如担任女主角，与周杰伦担任的男主角有一段亲密的吻戏。该MV以春夏秋冬的恋曲来描述：春天，女主角爱慕着男主角，把男主角衣服上的纽扣给摘走了；夏天，女主角慢慢地接近男主角，关心他，为他做便当，最终两人走到一起；秋天，两人分享一切快乐的时光，但快乐的时光总是短暂的，因为男主角要出国深造；冬天，两人选择分手。在相恋的这两个季节里，女主角陆续给男主角寄9封信，每封信都有一张照片。分手的那天，男主角收到了第9封信，并把所有9封信摆在沙滩上，显示的是：JAY I LOVE U [5] </div>
</div>

.box {
  width: 100%;
  background-color: rgba(246, 210, 7, 0.137);
  font-size: 18px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  /* 设置为3列 */
  column-count: 3;
  /* 设置列之间宽度为20px */
  column-gap: 20px;
  /* 设置列边框为4px dotted 紫色 */
  column-rule: 4px dotted rgb(137, 43, 226);
}
.title {
  column-span: all;
  font-size: 24px;
  text-align: center;
  color: rgba(13, 232, 166, 0.682);
  text-shadow: 1px 1px 10px rgba(56, 56, 232, 0.551);
}
.title-sub {
  font-size: 12px;
}
.p {
  text-indent: 20px;
}
img {
  width: 100%;
}