CSS 仅在移动视图上隐藏 div 标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16550485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
hide div tag on mobile view only?
提问by KoldTurkee
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.
我正在为网站创建流畅的布局。我试图在移动视图中隐藏一个<div>或整个<div>本身的内容，而不是平板电脑和桌面视图。
Here's what I've got so far...
这是我到目前为止所得到的......
#title_message {
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: 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?
我将移动布局的显示设置为“无”，并在平板电脑/桌面布局上设置为块......有没有更简单的方法来做到这一点，还是这样？
回答by Matt
You will need two things. The first is @media screento activate the specific code at a certain screen size, used for responsive design. The second is the use of the visibility: hiddenattribute. Once the browser/screen reaches 600pixels then #title_messagewill become hidden.
你需要两件事。首先是@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;
}
}
EDIT: if you are using another CSS for mobile then just add the visibility: hidden;to #title_message. Hope this helps you!
编辑：如果您使用其它CSS的移动，然后只需添加visibility: hidden;到#title_message。希望这对你有帮助！
回答by Phil Sinatra
Set the display property to noneas the default, then use a media query to apply the desired styles to the div when the browser reaches a certain width. Replace 768pxin the media query with whatever the minimum px value is where your div should be visible.
将 display 属性设置none为默认值，然后在浏览器达到一定宽度时使用媒体查询将所需的样式应用到 div。将768px媒体查询中的最小 px 值替换为您的 div 应该可见的位置。
#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%;
}
}
回答by Scarecrow
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { #title_message { display: none; }}
This would be for a responsive design with a single page for an iphone screen specifically. Are you actually routing to a different mobile page?
这将用于响应式设计，专门用于 iphone 屏幕的单个页面。您实际上是在路由到不同的移动页面吗？
回答by Steve Hall
The solution given didn't work for me on the desktop, it just showed both divs, although the mobile only showed the mobile div. So I did a little search and found the min-width option. I updated my code to the following and it works fine now :)
给出的解决方案在桌面上对我不起作用，它只显示两个 div，尽管移动设备只显示移动 div。所以我做了一些搜索，找到了 min-width 选项。我将代码更新为以下内容，现在可以正常工作了 :)
CSS:
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:
HTML：
<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
回答by Carlos franco
i just switched positions and worked for me (showing only mobile )
我刚刚换了职位，为我工作（只显示手机）
<style>
.MobileContent {
display: none;
text-align:center;
}
@media screen and (max-width: 768px) {
.MobileContent {
display:block;
}
}
</style>
<div class="MobileContent"> Something </div>回答by J.C. Gras
You can be guided by this example. On your css file:
你可以通过这个例子来指导。在您的 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;}
}
On your html file:
在您的 html 文件中：
<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
回答by Jodyshop
Well, I think that there are simple solutions than mentioned here on this page! first of all, let's make an example:
好吧，我认为有比此页面上提到的更简单的解决方案！首先，让我们举个例子：
You have 1 DIV and want to hide thas DIV on Desktop and show on Mobile (or vice versa). So, let's presume that the DIV position placed in the Headsection and named as header_div.
您有 1 个 DIV，并希望在桌面上隐藏该 DIV 并在移动设备上显示（反之亦然）。因此，让我们假设 DIV 位置放置在Head节中并命名为header_div.
The global code in your CSS filewill be: (for the same DIV):
您CSS file将使用的全局代码是：（对于同一个 DIV）：
.header_div {
display: none;
}
@media all and (max-width: 768px){
.header_div {
display: block;
}
}
So simple and no need to make 2 div's one for desktop and the other for mobile.
如此简单，无需为桌面制作 2 个 div，另一个用于移动设备。
Hope this helps.
希望这可以帮助。
Thank you.
谢谢你。
回答by Alejandro Ruiz Arias
try this
尝试这个
@media handheld{
#title_message { display: none; }
}
