媒体查询的两种方式

weixin_33976072

于 2018-01-10 21:45:00 发布

阅读量322

点赞数

本文介绍了如何使用CSS媒体查询及link标签实现不同屏幕尺寸下的背景颜色切换效果，包括小于600px宽度时显示蓝色背景，900px以上显示红色背景，1200px以上则变为黄色。

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

第一种：link的方式：

1 <link rel="stylesheet" media="screen and (max-width:600px)" href="./css/blue.css">
2     <link rel="stylesheet" media="screen and (min-width:900px)" href="./css/red.css">
3     <link rel="stylesheet" media="screen and (min-width:1200px)" href="./css/yellow.css">

第二种：css的方式：

    <style>
        @media screen and (max-width:600px) {
            body {
                background-color: blue;
            }
        }

        @media screen and (min-width:900px) {
            body {
                background-color: red;
            }
        }

        @media screen and (min-width:1200px) {
            body {
                background-color: yellow;
            }
        }
    </style>