为什么我的 margin(left/right) 在屏幕变小时不会调整大小？

Question

我知道存在与@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%。我在这里找不到问题。

Answer 1

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

之后声明

同时检查您的媒体查询语法：它必须在和

之间有一个 space

Answer 2

来自文档:

在 not、and 或 or 关键字和后面的 ( 字符之间需要

Whitespace。如果没有这个，解析器会将其解析为不同类型的标记。 Details

您的媒体查询需要在 and 和括号 (:

之间有一个 space


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

Answer 3

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

为什么我的 margin(left/right) 在屏幕变小时不会调整大小？

Why won't my margin(left/right) not resize when the screen is smaller?

html

css

media-queries