CSS-媒体查询-CFANZ编程社区

媒体查询就是获取到当前浏览器的宽度之后, 根据不同的宽度设置元素不同的样式

媒体查询的注意点

由于媒体查询需要根据不同的浏览器宽度调整元素的样式, 所以不适合用于比较复杂的网页

媒体查询的使用格式

在这里的media 可以理解为英文的if(如果)
@media 条件{} 含义: 如果条件满足, 那么就执行后面{} 中的代码

内联格式: @media 条件{}

外链格式: <link rel="stylesheet" href="css/xxx.css" media="条件">

在企业开发中, 如果需要分别给电脑 / 平板 / 手机分别设置样式, 那么我们会将电脑的样式写在前面, 平板的样式写在电脑的后面, 手机的样式写在平板的后面

在企业开发中媒体查询中指定的宽度不是固定的, 指定的宽度是根据自己企业的需求来指定的, 并没有一个固定的值代表电脑的, 也没有一个固定的值代表平板的, 也没有一个固定的值代表手机的

例如一个需求如下

PC 显示小牛(大于等于 980)
pad 显示小猪(小于 980, 并且大于等于 620)
phone 显示小马(小于 620)

实现代码如下所示，使用的为内联格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询-内联格式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*
        如果浏览器的宽度大于等于 980, 那么就执行后面 {} 中的代码
        */
        @media (min-width: 980px) {
            body {
                background: url("images/animal1.png");
            }
        }

        /*
        如果浏览器的宽度大于等于 620, 并且宽度小于 980, 那么就执行后面 {} 中的代码
        注意点: and的两边必须添加空格
        */
        @media (min-width: 620px) and (max-width: 979px) {
            body {
                background: url("images/animal2.png");
            }
        }

        /*
        如果浏览器的宽度小于620, 那么就执行后面 {} 中的代码
        */
        @media (max-width: 619px) {
            body {
                background: url("images/animal3.png");
            }
        }
    </style>
</head>
<body>
</body>
</html>

外链格式的实现代码如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询-外链式</title>
    <link rel="stylesheet" href="144-style-pc.css" media="(min-width:980px)">
    <link rel="stylesheet" href="144-style-pad.css" media="(min-width:620px) and (max-width:979px)">
    <link rel="stylesheet" href="144-style-phone.css" media=" (max-width:619px)">
</head>
<body>
</body>
</html>

CSS-媒体查询_媒体查询