我对使用媒体查询进行编码有点新意,而且我认为自己已经把自己描绘成了一个角落,使用了太多的媒体查询(可能是以错误的方式).
我想要做的是当屏幕或设备的宽度小于481px时隐藏一些页面元素.因此,在下面的屏幕截图中,您可能会在右上角看到几行文本.
我的问题与我使用的媒体查询有关.我最终想知道(1)为什么页面元素(右上角的那两行文本)在页面小于481px时不会消失或者(2)为什么它们不会出现在任何更大的屏幕中/设备大小,当我设法让页面元素消失.
这是一段似乎导致一些问题的CSS代码：
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px){
/* Hiding elements for this device * * * * * * * * * * * * * */
/*
.poweredBy{
display: none;
}
*/
}
注释掉这段代码后,这两行文本将不会消失,直到窗口(设备？)宽度大约为320px.
这是整个CSS：
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.poweredBy{
display: none;
}
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px){
.poweredBy{
display: none;
}
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
.poweredBy{
display: none;
}
}
/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
/* iPad 3 ---------------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {}
/* 960px layouts ----------- */
@media only screen and (min-width : 960px){}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {}
我在底下使用了GroundworkCSS,但我自己添加了一些媒体查询 – 这很可能不代表我的开明行为.所以,如果有人能指出我正确的方向,我将非常感激.谢谢.
解决方法
您可以使用许多媒体查询,您应该拥有的最多只有三个用于平板电脑,平板电脑和移动设备.通常像这样,
CSS
/** Mobile **/
@media only screen and (max-width: 767px),only screen and (max-device-width: 767px) {
}
/** Tablet **/
@media only screen and (min-width : 768px) and (max-width : 1024px) {
}
/** Tablet (landscape) **/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}
