极客教程css@media
参考:css @media
CSS @media简介
在网页设计中，响应式设计已经成为一种标准。CSS的@media查询是实现响应式设计的关键。@media允许开发者根据不同的媒体类型和特性，如屏幕宽度、设备方向等，为不同的情况应用不同的样式。这意味着你可以针对不同设备或浏览器大小编写特定的CSS规则，以确保您的网站在各种设备上都能呈现出良好的用户体验。通过@media，开发者可以创造出适应性强、灵活性高的网页设计，提高用户的访问体验，增强网站的可用性和可访问性。
媒体查询基础
媒体查询（Media Queries）是CSS3的一个重要特性，它允许开发者根据设备的特性、媒体类型或其他条件来应用特定的CSS样式。这是实现响应式设计的基础，使得网页可以根据用户访问的设备类型和环境进行自适应调整，从而提供更好的用户体验。
媒体类型
在媒体查询中，我们可以针对不同的媒体类型应用样式。常见的媒体类型包括屏幕（screen）、打印（print）、投影（projection）、语音（speech）等。下面是一个简单的示例，演示如何根据不同的媒体类型应用不同的样式：
/* 根据不同的媒体类型应用样式 */
/* 在屏幕上显示的样式 */
@media screen {
body {
font-family: Arial, sans-serif;
}
}
/* 在打印时显示的样式 */
@media print {
body {
font-family: Times New Roman, serif;
}
}
上面的代码中，我们使用@media查询分别针对屏幕和打印设备应用了不同的字体样式。这样做可以确保在屏幕上和打印时使用不同的字体，以提高可读性和打印效果。
媒体特性
除了媒体类型外，媒体查询还可以根据设备的特性来应用样式。这些特性可以包括视口宽度、设备方向、分辨率等。以下是一个示例，演示如何根据视口宽度调整页面布局：
/* 根据视口宽度调整页面布局 */
/* 当视口宽度小于600px时应用的样式 */
@media (max-width: 600px) {
.container {
width: 100%;
}
}
/* 当视口宽度大于600px时应用的样式 */
@media (min-width: 601px) {
.container {
width: 600px;
margin: 0 auto;
}
}
上面的代码中，我们使用@media查询根据视口宽度应用不同的样式。当视口宽度小于等于600px时，容器的宽度被设置为100%，以适应小屏幕设备；当视口宽度大于600px时，容器的宽度被固定为600px，并水平居中显示。
媒体查询的灵活性使得开发者可以针对不同的设备特性编写自定义的CSS规则，从而实现更加灵活和响应式的网页设计。在实际开发中，结合媒体查询和其他技术（如弹性布局、网格布局等），可以创建出适应性强、兼容性好的网页界面，为用户提供一致而优秀的浏览体验。
媒体类型
在响应式设计中，媒体类型是CSS @media查询中的重要概念之一。通过指定不同的媒体类型，开发者可以为不同的输出设备应用特定的样式，以确保网站在各种环境下都能良好呈现。常见的媒体类型包括屏幕、打印、投影和语音等。下面我们将分别介绍这些媒体类型，并给出相应的代码示例。
1. 屏幕 (screen)
屏幕媒体类型用于指定样式应用于计算机屏幕、平板电脑、智能手机等可视屏幕设备。这是响应式设计中最常用的媒体类型之一。
/* 当屏幕宽度小于等于600像素时应用这些样式 */
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
/* 当屏幕宽度在600像素到1200像素之间时应用这些样式 */
@media screen and (min-width: 600px) and (max-width: 1200px) {
body {
font-size: 16px;
}
}
/* 当屏幕宽度大于1200像素时应用这些样式 */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
}
2. 打印 (print)
打印媒体类型用于指定样式应用于打印文档时的格式。这是在打印网页时常用的媒体类型，允许开发者为打印输出设计特定的样式。
/* 打印时隐藏导航栏和页脚 */
@media print {
.navbar,
.footer {
display: none;
}
}
/* 设置打印页面的字体大小和颜色 */
@media print {
body {
font-size: 12pt;
color: #333;
}
}
3. 投影 (projection)
投影媒体类型用于指定样式应用于投影设备，如幻灯片或投影仪。这通常用于为幻灯片演示或类似用途设计特定的样式。
/* 设置投影页面的背景颜色和字体颜色 */
@media projection {
body {
background-color: white;
color: black;
}
}
/* 调整幻灯片的布局 */
@media projection {
.slide {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
4. 语音 (speech)
语音媒体类型用于指定样式应用于语音合成设备，如屏幕阅读器。这有助于提高网站的无障碍性，使其更易于使用。
/* 隐藏屏幕阅读器不需要的内容 */
@media speech {
.hidden-from-speech {
display: none;
}
}
/* 设置语音合成的文本颜色和大小 */
@media speech {
body {
color: #000;
font-size: 16px;
}
}
通过使用这些媒体类型，开发者可以为不同的输出设备定制样式，从而提供更好的用户体验和更广泛的设备兼容性。
媒体特性
在响应式设计中，媒体特性是调整样式以适应不同设备特性的关键。通过媒体特性，我们可以根据设备的特性，如视口宽度、设备方向等，来应用不同的样式，从而确保网页在不同环境下都能良好呈现。
示例代码：
/* 当视口宽度小于等于 768px 时应用样式 */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* 当视口宽度大于 1024px 且设备方向为横向时应用样式 */
@media (min-width: 1024px) and (orientation: landscape) {
.header {
width: 100%;
}
.sidebar {
display: none;
}
}
/* 当设备为打印机时应用样式 */
@media print {
.print-header {
display: block;
}
.print-footer {
display: block;
}
}
在上面的示例代码中，我们展示了几种常见的媒体特性的应用：
max-width：当视口宽度小于等于 768px 时，调整字体大小以适应小屏幕设备。min-width和orientation：当视口宽度大于 1024px 且设备方向为横向时，调整头部和侧边栏的样式以适应大屏幕横向设备。print：为打印设备应用特定样式，例如显示打印页眉和页脚。
这些示例展示了如何根据不同的媒体特性，为不同情况下的设备应用不同的样式，以提供更好的用户体验和设备兼容性。
响应式设计与@media
在现代Web开发中，响应式设计已经成为必备的技能。通过使用CSS的@media查询，开发者可以轻松地创建响应式布局和样式，以适应不同的设备和屏幕尺寸。下面是一个详细的示例，展示了如何利用@media查询实现响应式设计：
/* 默认样式 */
.container {
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.box {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 20px;
}
/* 媒体查询：当屏幕宽度小于600px时，应用新样式 */
@media only screen and (max-width: 600px) {
.box {
width: 50px;
height: 50px;
}
}
在上面的示例中，我们首先定义了一个.container，它会占据整个宽度并具有一定的内边距。然后定义了一个.box，它是一个红色的正方形块。
接着，在@media查询中，我们指定了一个条件：只有当屏幕宽度小于600px时，才会应用@media查询内部的样式。在这种情况下，.box的宽度和高度会变为50px，从而使其在较小的屏幕上更适合显示。
这个示例展示了@media查询如何根据不同的屏幕宽度应用不同的样式，从而实现响应式设计。开发者可以根据需要添加更多的@media查询，以适应不同尺寸和设备的要求，从而提供更好的用户体验。
通过合理地利用@media查询，开发者可以创建出适应性强、兼容性好的网页设计，提高用户的访问体验，增强网站的可用性和可访问性。
常见媒体查询示例
在响应式网页设计中，媒体查询是至关重要的工具，它允许开发者根据用户设备的特性来应用不同的样式。下面是几个常见的媒体查询示例，展示了如何根据不同的条件来改变页面的布局和样式。
1. 根据屏幕宽度调整布局
/* 当屏幕宽度小于等于 600px 时应用的样式 */
@media only screen and (max-width: 600px) {
body {
font-size: 14px;
}
.container {
width: 100%;
padding: 10px;
}
.sidebar {
display: none;
}
}
/* 当屏幕宽度大于 600px 时应用的样式 */
@media only screen and (min-width: 601px) {
body {
font-size: 16px;
}
.container {
width: 80%;
margin: 0 auto;
}
.sidebar {
display: block;
width: 20%;
float: right;
}
}
这个例子展示了如何根据屏幕宽度来调整布局。当屏幕宽度小于等于 600px 时，页面将应用适合小屏幕的样式，例如增加字体大小、将容器宽度设置为100%等。而当屏幕宽度大于 600px 时，页面将应用适合大屏幕的样式，例如减小字体大小、将容器宽度设置为80%等，并显示侧边栏。
2. 根据设备方向调整样式
/* 当设备处于横向方向时应用的样式 */
@media only screen and (orientation: landscape) {
.header {
background-color: #333;
}
.menu {
display: none;
}
}
/* 当设备处于纵向方向时应用的样式 */
@media only screen and (orientation: portrait) {
.header {
background-color: #fff;
}
.menu {
display: block;
}
}
这个例子展示了如何根据设备的方向来调整样式。当设备处于横向方向时，页面将应用适合横向浏览的样式，例如修改头部背景颜色、隐藏菜单等。而当设备处于纵向方向时，页面将应用适合纵向浏览的样式，例如恢复默认的头部背景颜色、显示菜单。
3. 根据设备像素密度调整样式
/* 当设备像素密度大于等于 2 像素/点时应用的样式 */
@media only screen and (min-resolution: 2dppx) {
.logo {
width: 200px;
}
}
/* 当设备像素密度小于 2 像素/点时应用的样式 */
@media only screen and (max-resolution: 1.9dppx) {
.logo {
width: 100px;
}
}
这个例子展示了如何根据设备的像素密度来调整样式。当设备像素密度大于等于 2 像素/点时，页面将应用高清晰度的样式，例如增加logo的宽度。而当设备像素密度小于 2 像素/点时，页面将应用普通分辨率的样式，例如减小logo的宽度。
通过这些常见的媒体查询示例，开发者可以根据不同的条件来创建适应性更强的响应式网页设计，以提供更好的用户体验。
最佳实践和注意事项
在使用@media查询时，一些最佳实践和注意事项可以帮助开发者更好地利用这一功能，确保网页在不同设备上都能够呈现出良好的用户体验和可访问性。
1. 使用媒体类型和媒体特性
在编写@media查询时，首先要确保选择适当的媒体类型和媒体特性。媒体类型包括all（所有设备）、screen（屏幕）、print（打印机）等，而媒体特性则包括width（宽度）、height（高度）、orientation（方向）等。正确选择媒体类型和特性可以确保样式规则只在特定条件下生效，从而提高网页的性能和可维护性。
2. 优先级和顺序
在CSS中，样式规则的优先级和顺序非常重要。当多个@media查询重叠时，浏览器会根据样式规则的顺序和特定条件下的优先级来确定最终应用的样式。因此，确保将最常见的和最一般的条件放在前面，将特定条件和较少使用的条件放在后面，以确保样式规则的正确应用。
3. 测试和调试
在开发响应式设计时，务必进行全面的测试和调试。不同设备和浏览器可能对@media查询的支持和解析存在差异，因此需要在各种设备和浏览器中进行测试，确保网页在各种情况下都能够正确显示和响应。可以利用浏览器的开发者工具和在线测试工具进行调试，确保样式在不同情况下都能够如期生效。
示例代码
下面是一个简单的示例，演示了如何使用@media查询根据屏幕宽度调整页面布局：
/* 默认样式 */
.container {
width: 100%;
}
/* 当屏幕宽度小于600px时应用的样式 */
@media screen and (max-width: 600px) {
.container {
width: 90%;
}
}
/* 当屏幕宽度小于400px时应用的样式 */
@media screen and (max-width: 400px) {
.container {
width: 80%;
}
}
在这个示例中，.container元素在不同屏幕宽度下应用不同的宽度样式，以实现响应式设计。通过使用@media查询，可以根据屏幕宽度动态调整页面布局，提供更好的用户体验。
综上所述，合理地利用@media查询可以实现更加灵活和响应式的网页设计，但在实践中需要注意选择合适的媒体类型和特性、正确的优先级和顺序，以及充分的测试和调试。这些最佳实践和注意事项可以帮助开发者更好地利用@media查询，创建出兼容性更好、用户体验更佳的响应式网页。