仅在移动视图上隐藏div标签？

Question

我正在为网站创建流畅的布局。我正在尝试在移动视图中隐藏一个<div>或整个内容的内容<div>，而不是在平板电脑和台式机视图中隐藏。

到目前为止，这就是我所得到的…

#title_message {
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
}

我将移动版式的显示设置为“无”，并在平板电脑/台式机版式上将其设置为“阻止” …有没有更简单的方法？

Answer 1

您将需要两件事。第一种是@media screen在特定屏幕尺寸下激活特定代码，用于响应式设计。第二个是visibility: hidden属性的使用。一旦浏览器/屏幕达到600像素，#title_message则将被隐藏。

@media screen and (max-width: 600px) {
  #title_message {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

编辑：如果您使用其他CSS进行移动，则只需将添加visibility: hidden;到#title_message。希望这对您有所帮助！