如何让 div 只允许 2 个宽度

Question

我的网站有几个 div。其中一个 div 需要特定，但这可以在 2 个宽度之间变化。有没有办法让它只允许 2 个宽度？

示例：

With resolution of page >= 700px  div width = 500px   
when page resolution < 700px  div width = 200px

Answer 1

使用媒体查询：

@media only screen and (min-width: 700px) {
    .my-div {
        width: 500px;
    }
}

Answer 2

像@media only screen and (max-width: 300px)

一样使用css媒体查询

当你添加

@media screen and (max-width: 300px) {
        body {
            background-color: lightblue;
        }

当宽度为 300px 时，您这样添加时，它会自动更改为您添加的规则

一个简单的例子

   <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: lightgreen;
}

@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}
</style>
</head>
<body>

<p>Resize the browserwindow. When the width of this document is less than 300 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>

</body>
</html>

回答

@media screen and (max-width: 700px  ) {
            div{
                width: 500px;
            }

@media screen and (min-width: 700px  ) {
            div{
                width: 200px;
            }

如何让 div 只允许 2 个宽度

How to get a div to only allow 2 widths

html

css

一个简单的例子

回答