移动网页开发之响应式布局之媒体查询

channel_海峡

已于 2023-03-09 20:52:57 修改

阅读量92

点赞数

分类专栏：日拱一卒文章标签： html

于 2023-03-09 20:30:00 首次发布

本文链接：https://blog.youkuaiyun.com/qq_31164125/article/details/129430502

版权

日拱一卒专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用CSS的@media规则根据设备宽度设置差异化的样式。例如，当屏幕宽度小于768px时，背景色为红色；大于768px但小于1200px时，背景色为白色；而当宽度大于等于1200px时，背景色变为蓝色。此外，文章还展示了如何通过link标签引入特定条件下的CSS文件。

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

目标：能够根据设备的宽度变化，设置差异化的样式
常用写法：

max-width // 小于等于此设置的值
min-width //大于等于此设置的值

@media (媒体特性) {
	选择器{
		样式
	}
}

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    @media (max-width:768px) {  /*小于768px的时候就是红色*/
        body {
            background-color: red;
        }
    }
    @media (min-width:1200px) {
        body {
            background-color: blue;
        }
    }
</style>
<body>
    
</body>
</html>

在这里插入图片描述
我们看到为768px的时候为红色

大于768的时候就白了

大于等于1200的时候就是蓝色

能不能引入css呢？

直接在头部用link引入，在满足条件的情况下使用对应的css文件

 <link rel="stylesheet" href="1.css" media="(min-width:900px)">
    <link rel="stylesheet" href="2.css" media="(min-width:1200px)">