CSS3中的@media响应式设计-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_50564041/article/details/108841694

@media查询允许根据不同的媒体类型或设备特性应用不同的CSS样式。它在响应式网页设计中至关重要，能根据屏幕尺寸、宽度、高度、方向等调整布局。常见参数包括width、height、device-width等，支持多种媒体类型如screen、print、speech等，适用于各种浏览器，包括IE9+、Chrome、Firefox、Safari和Opera。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、@media的定义和使用：
（1）使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
（2）@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
（3）当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body {
    background-color:lightgreen;
}

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}
</style>
</head>
<body>
<p>重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝，否则是淡绿色。<input type="button" onclick="resize_window()" value="查看效果"></p>
<SCRIPT>
<!--
function resize_window() {
        window.open ('http://www.w3cschool.cc/try/demo_source/trycss3_media_example1.htm','newwindow','height=299,width=299,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
}
//写成一行
-->
</SCRIPT>

</body>
</html>

在这里插入图片描述
2、@media的总结参数：
width:浏览器可视宽度。
height:浏览器可视高度。
device-width:设备屏幕的宽度。
device-height:设备屏幕的高度。
orientation:检测设备目前处于横向还是纵向状态。
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
device-aspect-ratio:检测设备的宽度和高度的比例。
color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
grid:检测输出的设备是网格的还是位图设备。
3、@media也适合在媒体使用，参数有：
（1）.all 所有媒体
（2）.braille 盲文触觉设备
（3）.embossed 盲文打印机
（4）.print 手持设备
（5）.projection 打印预览
（6）.screen 彩屏设备
（7）.speech '听觉’类似的媒体类型
（8）.tty 不适用像素的设备
（9）.tv 电视
以下都是常见的浏览器宽度：

@media screen and (min-width: 1200px) {
        css-code;
}
@media screen and(min-width: 960px) and (max-width: 1199px) {
        css-code;
}
@media screen and(min-width: 768px) and (max-width: 959px) {
        css-code;
}
@media screen and(min-width: 480px) and (max-width: 767px) {
        css-code;
}
@media screen and (max-width: 479px) {
        css-code;
}

而浏览器一般支持：
IE8-
IE9+
Chrome 5+
Opera 10+
Firefox 3.6+<
Safari 4+