以下是一个简单的 CSS3 多媒体查询实例，用于创建一个响应式的网页布局。在这个示例中，我们根据屏幕宽度应用不同的样式：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Responsive Web Design Example</title>
</head>
<body>
    <header>
        <h1>My Responsive Website</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>Welcome to our website!</h2>
            <p>This is a simple example of a responsive web design using CSS3 media queries.</p>
        </section>
        <section>
            <h2>Our Services</h2>
            <ul>
                <li>Web Design</li>
                <li>Graphic Design</li>
                <li>Responsive Development</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 My Responsive Website</p>
    </footer>
</body>
</html>

CSS (styles.css)：
/* 基本样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #3498db;
    color: #fff;
    text-align: center;
    padding: 20px;
}

nav {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li {
    display: inline-block;
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}

main {
    padding: 20px;
}

section {
    margin-bottom: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
}

/* 响应式布局 */
@media only screen and (max-width: 600px) {
    nav {
        display: block;
        text-align: left;
    }

    nav ul {
        text-align: center;
        padding-top: 10px;
    }

    nav li {
        display: block;
        margin: 0;
    }
}

在这个示例中，我们创建了一个简单的网页布局，包括头部（header）、导航栏（nav）、主内容区域（main）、和页脚（footer）。在 CSS 文件中，我们使用了媒体查询来针对小屏幕设备（宽度小于等于 600px）应用了特定的样式。在这种情况下，导航栏的显示方式被调整为垂直排列，以适应较小的屏幕。这是一个典型的响应式网页设计实例，通过媒体查询使得网页在不同屏幕尺寸下能够呈现出最佳的布局效果。


转载请注明出处：http://www.pingtaimeng.com/article/detail/12576/CSS