只在移动视图上隐藏div标记？

我正在为网站创建流体布局。我试图在移动视图中隐藏<div>或整个<div>的内容，而不是平板电脑和桌面视图。只在移动视图上隐藏div标记？

这里就是我这么远......

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

我已经将显示器设置为移动布局“无”，并设置为在平板电脑/桌面布局块...有一个更简单的方法来做到这一点，或者是它？

来源

2013-05-14 KoldTurkee

您将需要两件事情。第一个是@media screen，用于激活特定屏幕大小的特定代码，用于响应式设计。第二种是使用visibility: hidden属性。一旦浏览器/屏幕达到600pixels然后#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。希望这可以帮助你！

来源

2013-05-14 21:28:08 Matt

修复它。谢谢马特！ – KoldTurkee

我很高兴工作！感谢您将答案标记为正确。 – Matt

当你来到StackOverflow ...总会有一个解决您的查询.....除了，大部分时间我似乎遇到轻微的选择。 ...这个答案正是我一直在寻找的！ ...谢谢老兄。（ps用于我的网站http://amazewebs.com上的自定义移动菜单...手机菜单将显示宽度<768px –

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { #title_message { display: none; }}

这将是一个专门针对iphone屏幕的单个页面的响应式设计。你是否实际路由到不同的移动页面？

来源

2013-05-14 18:46:49 Scarecrow

这没有奏效。它清除了移动版面的所有CSS。 – KoldTurkee

你可以提供你的css的小样本吗？我没有在这里看到整个图片，但是这不应该消除你的布局 – Scarecrow

这个工作更好，因为可见性：隐藏只隐藏元素，但仍然存在（该地方仍然存在）。相反，显示：无;真正隐藏它并完全删除它。 – Angel

将display属性设置为none作为默认值，然后在浏览器达到一定宽度时使用媒体查询将所需样式应用于div。在媒体查询中将768px替换为div的最小px值。

#title_message { 
    display: none; 
} 

@media screen and (min-width: 768px) { 
    #title_message { 
     clear: both; 
     display: block; 
     float: left; 
     margin: 10px auto 5px 20px; 
     width: 28%; 
    } 
}

来源

2013-05-14 20:27:28

这是错误的方式。该div不会显示在不支持媒体查询的浏览器上。 – MMM

respond.js https://github.com/scottjehl/Respond将在不支持媒体查询的旧版浏览器上解决此问题。媒体查询是响应式网站的解决方案。 –

当然他们是解决方案，但是你这样做**错误的方式**。除非你的网站主要用于移动设备，否则你从来没有从底层开始构建你的CSS。 – MMM

试试这个

@media handheld{ 
    #title_message { display: none; } 
}

来源

2013-05-14 21:20:29

你可以通过这个例子来指导。在你的CSS文件：

.deskContent { 
    background-image: url(../img/big-pic.png); 
    width: 100%; 
    height: 400px; 
    background-repeat: no-repeat; 
    background-size: contain; 
} 

.phoneContent { 
    background-image: url(../img/small-pic.png); 
    width: 100%; 
    height: 100px; 
    background-repeat: no-repeat; 
    background-size: contain; 
} 

@media all and (max-width: 959px) { 
    .deskContent {display:block;} 
    .phoneContent {display:none;} 
} 

@media all and (max-width: 479px) { 
    .deskContent {display:none;} 
    .phoneContent {display:block;} 
}

在HTML文件中：

<div class="deskContent">Content for desktop</div> 
<div class="phoneContent">Content for mobile</div>

来源

2017-04-19 21:20:36 gras

给予我的桌面上没有工作的解决方案，它只是表明双方的div，虽然移动仅表现为移动DIV。所以我做了一些搜索，找到了最小宽度选项。我在我的代码更新到下面的，现在工作得很好:)

CSS：

@media all and (min-width: 480px) { 
    .deskContent {display:block;} 
    .phoneContent {display:none;} 
} 

@media all and (max-width: 479px) { 
    .deskContent {display:none;} 
    .phoneContent {display:block;} 
}

HTML：

<div class="deskContent">Content for desktop</div> 
<div class="phoneContent">Content for mobile</div>

来源

2017-08-02 22:15:27

只在移动视图上隐藏div标记？

回答

相关问题