html - @media 为高分辨率 / ipad / iphone 配置

Question

我真的浪费了一整天的时间来解决这个问题。

当我将浏览器的大小调整为小于 778 像素的宽度时，屏幕会变黑。（任何高度都有效，只是宽度不配置）

我想做的是添加一个实际显示我当前拥有的移动@media 设置！

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

任何想法我的代码有什么问题？我一直在通过我的 css 下雨。

代码：http: //jsfiddle.net/jwrg5/

非常感激！

Answer 1

这是一个应用媒体查询的临床示例（小提琴）：

@media (max-width: 480px) {
    body {
        background: red;
    }
}

@media (min-width: 481px) {
    body {
        background: blue;
    }
}

样式表功能如下：

• 当您的视口宽于 480 像素时，将呈现蓝色背景
• 较窄的视口呈现红色。

max-width请注意，使用和之间是有区别的max-device-width。后者为您提供最大设备宽度，这不允许您通过调整浏览器窗口大小来轻松测试查询。