Question

我有一个网页的HTML和CSS代码。我正在尝试使该网站适合移动设备，并根据所查看的屏幕大小调整自身的大小。我希望在像智能手机这样的窄屏幕上观看时边距变得非常小，并且当屏幕更大并且边距变得越来越大，直到它是例如台式计算机的全屏幕时，它会逐渐重新调整。但是，这段代码并没有真正起作用。（我没有包含此代码的所有其他CSS部分，但如果需要，请提出要求！）

我尝试根据屏幕宽度调整边距大小：

        @media (max-width: 1100px, min-width: 800px) {
            body {
                margin-right: 20px;
                margin-left: 20px;
            }

        @media (max-width: 750px, min-width: 501) {
            body {
                margin-right: 5vw;
                margin-left: 5vw;
            }
        }   
        @media (max-width: 500px) {
            body {
                margin-right: 2vw;
                margin-left: 2vw;
            }
        }
    </style>
</head>
<body>
    <header>

        <h1>Blog</h1>
        <ul> <!-- Menu Tabs -->
            <li><a href="#">Home</a></li>
            <li><a href="#">Art</a></li>
            <li><a href="#">Music</a></li>
        </ul>
    </header>
</body>

谢谢，我真的很感谢你的帮助！

Answer 1

您缺少围绕第一个媒体查询的结束括号。此外，您的媒体查询中还有一些额外的位使其无效。媒体查询的工作方式使您尝试添加的min-width部分不必要。以下代码在大屏幕上创建20px左/右边距。当达到750px的阈值时，5vw会启动，依此类推。

/* Invalid: 
   @media (max-width: 1100px, min-width: 800px) 
*/

@media (max-width: 1100px) {
  body {
    margin-right: 20px;
    margin-left: 20px;
  }
}

@media (max-width: 750px) {
  body {
    margin-right: 5vw;
    margin-left: 5vw;
  }
}

@media (max-width: 500px) {
  body {
    margin-right: 2vw;
    margin-left: 2vw;
  }
}

如果您打算使用默认20px左/右边距，对于大于1100px的屏幕，您可以在CSS中创建一个默认边距，该边距将被您的媒体查询覆盖规则。然后，您可以以更窄的屏幕尺寸开始媒体查询。

/* default size */
body {
  margin-left: 20px;
  margin-rights: 20px;
}

@media (max-width: 750px) {
  body {
    margin-right: 5vw;
    margin-left: 5vw;
  }
}

@media (max-width: 500px) {
  body {
    margin-right: 2vw;
    margin-left: 2vw;
  }
}

https://jsfiddle.net/5vez3rdc/

如何根据屏幕宽度调整边距大小？

1 个答案: