在移动视图上只隐藏div标签？ [英] hide div tag on mobile view only?

问题描述

我正在为网站创建流畅的布局。我试图隐藏< div> 的内容或整个< div> 移动视图，但不是平板电脑和桌面视图。

I'm creating a fluid layout for a site. I'm trying to hide the contents of a <div> or the whole <div> itself in the mobile view, but not the tablet and desktop view.

以下是我到目前为止...

Here's what I've got so far...

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

我将显示设置为none

I have the display set to 'none' for the mobile layout and set as block on the tablet/desktop layouts... Is there an easier way to do that, or is that it?

推荐答案

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

You will need two things. The first is @media screen to activate the specific code at a certain screen size, used for responsive design. The second is the use of the visibility: hidden attribute. Once the browser/screen reaches 600pixels then #title_message will become hidden.

@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 。希望这可以帮助你！

if you are using another CSS for mobile the just add the visibility: hidden; to #title_message. Hope this helps you!

这篇关于在移动视图上只隐藏div标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！