CSS 媒体查询问题（无法摆脱空 space）

Question

我真的是 Css 的新手。我正在使用@media 为我的界面的移动视图和桌面获取两个不同的标题view.By 使用@media 我在更改视图时隐藏标题但它仍然显示另一个的内容space.As 例如，这个是我的移动视图

移动视图的桌面视图标题 space 位于顶部。这是我的代码。

#css
@media (min-width: 320px) and (max-width: 480px) {

    .desktopViewFirstRow{
        visibility: hidden;
        display: none;
    }

<Grid.Row className="desktopViewFirstRow">
        <Grid.Column width={8}>User</Grid.Column>
        <Grid.Column width={4}>
          <Button className="redButton">Delete</Button>
        </Grid.Column>
      </Grid.Row>

谢谢。

Answer 1

删除最小宽度。当您使用它并编写 AND 时，您将对这两个实例应用此规则。试试这个。如果你想申请手机，不需要最低限度，这应该可以正常工作。您还需要删除 'visibility : hidden'。与 display:none 不同，因为这仅隐藏元素而不会删除其 space。

@media (max-width: 480px) {

  .desktopViewFirstRow {
    display: none;
  }

Answer 2

您正在使用 visibility 和 display 属性。

Visibility 将隐藏元素，但将元素的 space 保留在 UI 中。另一方面， display 将从 UI 及其 space.

中删除元素

注意：- visibility 和 display 属性都不会从DOM，只是他们会隐藏和显示 UI 中的元素。

现在，根据您的查询，根据您的要求使用任何一个属性。由于您要连同 space 一起删除标题，因此删除可见性属性并仅使用显示属性.

@media (min-width: 320px) and (max-width: 480px) {

    .desktopViewFirstRow{
        display: none;
    }

希望对您有所帮助。

Answer 3


    .desktopViewFirstRow{
        visibility: hidden;
        display: none !important;
    }

这对我有用。

CSS 媒体查询问题（无法摆脱空 space）

Issue with CSS Media Queries(Cannot get rid from empty space)

css

media-queries