CSS 中的“@media screen”是啥？ [复制]
Posted
技术标签:
【中文标题】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.
感谢你们！是的，这回答了我的问题，我稍后会研究它:)
“两者”？据我所知，只有我一个人……或者您指的是其他人提出了与另一个问题相同的链接（仅反映在赞成票和第二次“接近”投票中）？
【参考方案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>【讨论】：
以上是关于CSS 中的“@media screen”是啥？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
“@media screen and (-webkit-min-device-pixel-ratio:0)”的语义是啥？
精简 - bootstrap响应式自定义屏宽限制 - css - @media screen and ( max-width: 767px) {}