CSS 中的“@media screen”是什么？ [复制]

【问题标题】：What is `@media screen` in CSS? [duplicate]CSS 中的“@media screen”是什么？ [复制]
【发布时间】：2020-09-19 22:54:55
【问题描述】：

我正在学习 CSS 中的 Flexbox，我想知道第一行到底是做什么的，即 @media 屏幕是什么，em 到底是什么？

@media screen and (min-width: 30em) {
  .single-nav ul {
    display: flex;
    justify-content: space-between;
  }

  .single-nav li {
    flex: 1 0 auto;
    text-align: center;
  }
}

【问题讨论】：

他们是media queries。它们与 flexbox 无关。至于em 单位，如果你只用谷歌搜索CSS em，就会有很多结果，例如MDN.
感谢你们！是的，这回答了我的问题，我稍后会研究它:)
“两者”？据我所知，只有我一个人……或者您指的是其他人提出了与另一个问题相同的链接（仅反映在赞成票和第二次“接近”投票中）？

标签： css media-queries

【解决方案1】：

@media 用于响应式 html css 设计。使用@media screen and (min-width: 30em) 表示如果屏幕大小为 30em 或更大，则将应用特定的 css 属性。请参阅小示例以获得更好的理解。

em 用于动态字体大小。如果您使用px 作为字体大小，那么当您更改系统字体大小时，字体不会调整大小。另一方面，em 或 rem 在您更改系统字体大小时会动态更改大小。

.example{
background-color:red;
padding:100px;
}
@media only screen and (max-width: 700px){
.example{
background-color:yellow;
}
}

<html>
<head>
<style>

</style>
</head>

<body>
<div class="example">
<p>when screen size is 700px or lesser then background will be yellow otherwise red</p>

</div>
</body>
</html>

【讨论】：