理解 CSS 媒体查询
目录
什么是 CSS 媒体查询以及它为何有用?
CSS 媒体查询使我们能够根据所应用的一些规则来控制、修改网站布局并使其具有响应性。
CSS 媒体查询如何工作?
媒体查询使用@media
声明来为应用的块指定条件。如果给定的条件为真,则应用相应的规则。
CSS媒体查询有四种可能types
:
all /* apply to all media type devices */
print /* apply on printers */
screen /* apply on screens */
speech /* apply on speech synthesizers */
这@media type
是可选的,如果我们跳过它,则all
类型将默认隐含。
现在,让我们看一些如何@media
根据不同的屏幕分辨率应用声明的示例。
@media screen and (min-width: 600px) {
/* Apply when the browser is at least 600px or above */
/* Equivalently we can write for any device */
/* @media (min-width: 600px) */
}
@media screen and (max-width: 800px) {
/* Apply when the browser is at maximum 800px or less */
/* Equivalently we can write for any device */
/* @media (max-width: 800px) */
}
@media screen and (min-width: 600px) and (max-width: 800px)
/* Apply when the browser is from 600px to 800px */
/* Equivalently we can write for any device */
/* @media (min-width: 600px) and (max-width: 800px) */
}
在下面的示例中,我们将讨论两种使用媒体查询的情况。这些示例的核心思想是导航栏项目如何随着屏幕分辨率的变化而变化和重新排列。
此外,在这些示例中,我并不太强调元素的样式,而是强调媒体查询的应用方式。您可以在已置顶的 Codepen 上查看详细代码。
示例 1
当屏幕宽度尺寸为 时800px or less
,navbar items
将在一列中居中显示,而当屏幕宽度尺寸为 时600px or less
,navbar items
将显示蓝色。
@media (max-width: 800px) {
nav ul {
flex-direction: column;
text-align: center;
}
}
@media (max-width: 600px) {
nav ul {
flex-direction: column;
text-align: center;
}
nav {
background-color: rgb(62, 109, 149);
}
}
示例 2
当屏幕宽度为 时800px or less
,会出现一个按钮,导航栏会隐藏。
点击按钮时navbar items
, 会出现在一列中;当屏幕宽度为 时600px or less
,navbar items
会显示为蓝色。
@media (max-width: 800px) {
nav ul {
display: none;
flex-direction: column;
width: 100%;
}
nav ul.show {
display: flex;
}
.my-button {
display: block;
}
}
@media (max-width: 600px) {
nav ul {
display: none;
flex-direction: column;
width: 100%;
}
nav ul.show {
display: flex;
}
.my-button {
display: block;
}
nav {
background-color: rgb(62, 109, 149);
}
}