当屏幕变小时，为什么我的边距（左/右）不会调整大小？答案

【问题标题】：Why won't my margin(left/right) not resize when the screen is smaller?当屏幕变小时，为什么我的边距（左/右）不会调整大小？
【发布时间】：2021-07-10 23:58:37
【问题描述】：

我知道存在与@media 屏幕相关的问题，但遗憾的是它对我没有用。
所以我的 style.css 是这样的

    .left-align-item {
        margin-left: 20%;
        margin-bottom: 80px;
        text-align: left; 
    }
    #logo {
        margin-top: -65px;
        float: left;
        margin-left: 20%; 
    } 
    ul {
        float: right;
        margin-top: 24px;
        margin-right: 20%; 
    }

还有我的 responsive.css

@media screen and(max-width: 1360px) {
    /*GENERAL*/
    .left-align-item {
        margin-left: 10%;
    }
    /*HEADER*/
    #logo {
        margin-left: 10%;
    }
    ul {
        margin-right: 10%;
    }
}

还有头：

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/icon.ico">
    <link rel="stylesheet" href="assets/css/fa/css/fontawesome.css">
    <link rel="stylesheet" href="assets/css/fa/css/brands.css">
    <link rel="stylesheet" href="assets/css/fa/css/solid.css">
</head>

如果我的屏幕小于 1360 像素，左边距不会从 20% 调整到 10%。我在这里找不到问题。

【问题讨论】：

您应该创建一个 sn-p 以便我们查看实际发生的情况。
请在您包含文件的位置包含代码？
@MisterJojo 是的，当屏幕调整大小时，似乎特定类/标签的 css 不会被媒体查询覆盖。
@ShreyanshKashyap 我不能，因为 stackoverflow 告诉我即使在执行 sn-ps 时我也只有代码
@MisterJojo 否 and(max-width) 之间缺少空格

标签： html css media-queries

【解决方案1】：

来自文档：

not、and 或 or 关键字与以下 ( 字符之间需要空格。如果没有这个，解析器会将其解析为不同类型的令牌。 Details

您的媒体查询需要在and 和括号( 之间有一个空格：


@media screen and (max-width: 1360px) {
    /*GENERAL*/
    .left-align-item {
        margin-left: 10%;
    }
    /*HEADER*/
    #logo {
        margin-left: 10%;
    }
    ul {
        margin-right: 10%;
    }
}

【讨论】：

哦。谢谢你的帮助:)

【解决方案2】：

一切似乎都很好，除了放在头标签中的标签顺序。尝试在标题上方发布标签。希望这可以解决问题。

【讨论】：

【解决方案3】：

这可能是一个特异性问题。检查样式链接的顺序，确保 responsive.css 在 style.css

之后声明

还要检查您的媒体查询语法：它必须在和

之间有一个空格

【讨论】：

这个可以。但是，OP 没有说明他们是否为此使用不同的样式表文件。
如你所说的那样声明