Div 显示/隐藏媒体查询 [英] Div show/hide media query

问题描述

我可以使用什么代码使特定 div 仅在移动设备宽度上显示?

我的屏幕顶部有一个 100% 宽度的完整 div，希望它仅在设备指定为移动宽度时显示.

解决方案

我不确定您所说的移动宽度"是什么意思.但在每种情况下，CSS @media 都可用于隐藏屏幕宽度基础上的元素.看一些例子:

...和:

@media screen and (min-width: 0px) and (max-width: 400px) {#my-content { 显示:块；}/* 在小屏幕上显示 */}@media screen and (min-width: 401px) and (max-width: 1024px) {#my-content { 显示:无；}/* 将它隐藏在别处 */}

一些真正的移动检测是一种硬编程并且相当困难.最终查看:http://detectmobilebrowsers.com/ 或其他类似来源.

What code can I use to make a particular div show only if on a mobile width?

I have a 100% width full div at the top of my screen, would like it to only show when the device is specified as a mobile width.

解决方案

I'm not sure, what you mean as the 'mobile width'. But in each case, the CSS @media can be used for hiding elements in the screen width basis. See some example:

<div id="my-content"></div>

...and:

@media screen and (min-width: 0px) and (max-width: 400px) {
  #my-content { display: block; }  /* show it on small screens */
}

@media screen and (min-width: 401px) and (max-width: 1024px) {
  #my-content { display: none; }   /* hide it elsewhere */
}

Some truly mobile detection is kind of hard programming and rather difficult. Eventually see the: http://detectmobilebrowsers.com/ or other similar sources.

这篇关于Div 显示/隐藏媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！