媒体查询

最新推荐文章于 2023-08-01 18:06:30 发布

github@niexia

最新推荐文章于 2023-08-01 18:06:30 发布

阅读量2.4k

点赞数 3

分类专栏： HTML5 CSS3响应式文章标签：媒体查询响应式

本文链接：https://blog.csdn.net/niexia_/article/details/78671897

版权

HTML5 CSS3响应式专栏收录该内容

4 篇文章 0 订阅

订阅专栏

媒体查询

媒体查询可以让我们根据设备显示器的特性为其设定css样式。可以将媒体查询想象成对浏览器的提问。如果浏览器回答“是”，则应用样式；如果回答“否”，则不应用样式。

媒体查询是类似在提一下的问题：

你是一块纵向放置的显示屏吗？
你的最大宽度是960px吗？
你的最大高度是768px吗？
…
然后根据浏览器的回答给他添加相应的样式。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body {background-color: grey;}
        @media screen and (max-width: 960px){ //如果最大宽度是960px，则添加以下样式
            body{ 
                background-color: red;
            }
         } 
         @media screen and (max-width: 768px) {
            body{
                background-color: orange;
            }
         }
    </style>
</head>
<body>

</body>
</html>

媒体查询能检测的特性

这里写图片描述

github@niexia

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
媒体查询

媒体查询媒体查询可以让我们根据设备显示器的特性为其设定css样式。可以将媒体查询想象成对浏览器的提问。如果浏览器回答“是”，则应用样式；如果回答“否”，则不应用样式。媒体查询是类似在提一下的问题：你是一块纵向放置的显示屏吗？你的最大宽度是960px吗？你的最大高度是768px吗？ … 然后根据浏览器的回答给他添加相应的样式。<!DOCTYPE html><html><head
复制链接

扫一扫