我只能在移动宽度上使用什么代码制作特定的div节目?
我的屏幕顶部有一个100%宽度的完整div,希望它仅在设备指定为移动宽度时显示。
答案 0 :(得分:81)
我不确定,你的意思是“移动宽度”。但在每种情况下,CSS @media
都可用于在屏幕宽度的基础上隐藏元素。看一些例子:
<div id="my-content"></div>
...和
@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 */
}
一些真正的移动检测是一种艰难的编程,而且相当困难。最后请看:http://detectmobilebrowsers.com/或其他类似的来源。
答案 1 :(得分:0)
听起来您可能想要访问设备的视口。您可以通过在标头中插入此元标记来完成此操作。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
答案 2 :(得分:0)
Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
#my-content{
width:100%;
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
#my-content{
width:100%;
}
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
display: none;
}
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
// Havent code only get for more informations
}