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

Posted 2023-03-06

【中文标题】仅在移动视图上隐藏 div 标签？

【英文标题】：hide div tag on mobile view only?

【发布时间】：2013-05-09 03:58:01

【问题描述】：

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

这是我到目前为止所得到的......

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

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

【参考方案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。希望对您有所帮助！

【讨论】：

修复了它。谢谢马特！

我很高兴它成功了！感谢您将答案标记为正确。

当你来到 *** 时……总会有你的查询的解决方案.....除了，大多数时候我似乎遇到了一些轻微的选择。 ...这个答案正是我想要的！ ...谢谢老兄。 （ps 用于我网站上的自定义移动菜单amazewebs.com ...当宽度 时将显示移动菜单

它对我有用。必须只显示移动页面@媒体屏幕和 (min-width: 700px) .mobile-title visibility: hidden; div.mobile-title h1 text-align: center !important;字体大小：20px；字体粗细：粗体；填充：5px；

【参考方案2】：

将 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%;
    

【讨论】：

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

他们当然是解决方案，但你这样做错误的方式。除非您的网站主要用于移动设备，否则您永远不会自下而上构建 CSS。

我不认为移动和桌面是独立的网站。随着浏览器变大，扩大项目比随着浏览器变小而缩小项目要容易得多。在这种情况下，KT 正在构建响应式站点，无论它是“主要”用于移动设备还是仅针对所有浏览器进行了优化。移动优先的方法使移动浏览器不必加载从未实际应用过的额外 CSS 样式。这种方法不是错误的方式，它根本不是您建议构建 css 的方式。

@MMM 实际上，移动优先设计就是这样：自下而上。

@MMM 哎呀，我以为是 2015 年。无论如何，我只是反对“你永远不会自下而上构建你的 CSS”

【参考方案3】：

给出的解决方案在桌面上对我不起作用，它只显示了两个 div，尽管移动设备只显示了移动 div。所以我做了一点搜索，找到了 min-width 选项。我将我的代码更新为以下内容，现在可以正常工作了:)

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>

【参考方案4】：

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

这适用于响应式设计，专门针对 iphone 屏幕使用单个页面。您实际上是在路由到不同的移动页面吗？

【讨论】：

那行不通。它消除了移动布局的所有 CSS。

你能提供一个你的css的小样本吗？我没有在这里看到全貌，但这不应该抹去你的布局

这个效果更好，因为 visibility: hidden 仅隐藏元素但仍然存在（该位置仍然存在）。而是显示：无；真正隐藏它并完全删除它。

【参考方案5】：

您可以通过此示例进行指导。在您的 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>

【参考方案6】：

我刚刚换了职位并为我工作（仅显示移动设备）

<style>
 .MobileContent 

     display: none;
	 text-align:center;

 

@media screen and (max-width: 768px) 

 .MobileContent 

     display:block;

 


</style>
<div class="MobileContent"> Something </div>

【参考方案7】：

嗯，我认为有比本页提到的更简单的解决方案！首先，我们举个例子：

您有 1 个 DIV 并希望在桌面上隐藏该 DIV 并在移动设备上显示（反之亦然）。所以，我们假设 DIV 位置放在Head 部分并命名为header_div。

CSS file 中的全局代码将是：（对于同一个 DIV）：

.header_div 
    display: none;


@media all and (max-width: 768px)
.header_div 
    display: block;

如此简单，无需制作 2 个 div，一个用于桌面，另一个用于移动。

希望这会有所帮助。

谢谢。

【讨论】：

不是这样工作的

【参考方案8】：

试试这个

@media handheld
    #title_message  display: none;