统计

随笔 - 89
文章 - 0
评论 - 5
阅读 - 99547

CSS3媒体查询（Media Queries）是CSS的一个强大功能，它允许你根据设备的特性（如视口宽度、分辨率等）来应用不同的样式。这在创建响应式网站（即能自动适应不同屏幕尺寸和设备的网站）时非常有用。

以下是一个简单的CSS3媒体查询和页面自适应的示例：

首先，我们假设有一个简单的HTML结构：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>媒体查询示例</title>  
    <link rel="stylesheet" href="styles.css">  
</head>  
<body>  
    <header>  
        <h1>我的网站标题</h1>  
    </header>  
    <main>  
        <p>这里有一些内容...</p>  
    </main>  
</body>  
</html>

接下来，我们创建一个名为styles.css的CSS文件，并使用媒体查询来定义不同屏幕尺寸下的样式：

/* 默认样式（例如，在桌面浏览器中） */ 
header {  
    background-color: lightblue;  
    text-align: center;  
    padding: 20px;  
}  
   
main p {  
    font-size: 18px;  
    line-height: 1.5;  
}  
   
/* 当视口宽度小于或等于 768px 时（例如，在平板电脑或较小的桌面浏览器中） */ 
@media screen and (max-width: 768px) {  
    header {  
        padding: 10px;  
    }  
   
    main p {  
        font-size: 16px;  
    }  
}  
   
/* 当视口宽度小于或等于 480px 时（例如，在智能手机上） */ 
@media screen and (max-width: 480px) {  
    header h1 {  
        font-size: 1.5em;  
    }  
   
    main p {  
        font-size: 14px;  
    }  
}