Question

在媒体查询中完全删除。我怎么能这样做？

我有以下CSS：

<form id="signin" action="">
<input type="radio" name="pro" value="pro"><span>pro</span><br>
<input type="radio" name="perso" value="perso"><span>perso</span><br>
<input type="submit" value="Submit">
</form>

Answer 1

使用媒体查询时，您可以在设备具有一定宽度时覆盖CSS。

所以：

#container {
    width: 50%;
}

@media screen and (max-width: 600px) {
    #container {
        width: auto;
    }
}

但是您无法删除CSS规则，实际上每个元素都默认已经设置了所有CSS值，并且浏览器只是覆盖其中一些，如果你想要一个元素并且进入＆＃34;计算＆＃34;在开发人员工具的选项卡中，您可以看到所有CSS属性。

这些是浏览器使用的CSS文件（称为用户代理样式表）：

Firefox（Gecko）：https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css。
Chrome / Safari（WebKit）：http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
- Chrome（闪烁）：https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
Internet Explorer（Trident），旧版本：http://www.iecss.com/

然而你可以使用value:initial; width:initial;重置为默认 CSS值，但如果您知道CSS默认值（可见的是there），那么可以具体化（在这种情况下width:auto;）。

阅读本文以了解有关媒体查询的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 2

width属性的初始值为auto，这意味着如果将width设置为auto，则表示不存在其他宽度规则。

#container {
    width: 50%;
}

@media screen and (max-width: 600px) {
    #container {
        width: auto;
    }
}

此外，由于最好编写Mobile-first css，我会完全删除#container选择器并添加以下媒体查询

@media screen and (min-width: 601px) {
    #container {
        width: 50%;
    }
}

Answer 3

您可以使用值 initial 。有关它的更多信息：CSS Initial/Inherit

 #container {
    width: 50%;
}

@media screen and (max-width: 600px) {
    #container {
        width: initial;
    }
}

Answer 4

我对您的问题的理解是，您希望通过容器的媒体查询完全删除宽度吗？如果是这样，只需添加＆＃39; 0＆＃39; 0你宽度的那个ID。如果您愿意，可以使用＆＃39; 0px＆＃39;或者＆＃39; 0％＆＃39;但这真的不需要。如果这不起作用，请尝试添加＆＃39;！important＆＃39;到您的媒体查询，如下所示。

#container {
        width: 50%;
    }

@media screen and (max-width: 600px) {
    #container {
        width: 0;
    }
}

或

#container {
        width: 50%;
    }

@media screen and (max-width: 600px) {
    #container {
        width: 0 !important;
    }
}

要在媒体查询中完全删除。我怎么能这样做？

4 个答案: