CSS媒体查询无法正常工作

Question

问题

CSS媒体查询在Smartphones和Phablets中不能很好地工作，但是在模拟器中则可以很好地工作。 问题在于媒体查询缺少匹配。 例如，我的手机屏幕尺寸为320px，但应用了720px css。

也许

我的问题是由于缺少“（min-device-pixel-ratio：1.5）”而引起的。 但我不知道它是什么以及如何使用它。

网站

    @media only screen and (min-width: 480px) and (max-width: 619px)
    @media only screen and (min-width: 320px) and (max-width: 479px)
    @media only screen and (min-width: 250px) and (max-width: 319px)
    @media only screen and (max-width: 249px)

Answer 1

这是您页面的元标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Answer 2

看看一些媒体查询

http://mediaqueri.es/

Answer 3

如果您对CSS Media Queries的投入不多，也许可以尝试Restive Plugin 。 当您构建响应式网站（或为移动设备改装台式机网站）时，它使事情变得容易一些。

有一个“入门”指南在这里： http://blog.restive.io/posts/5852603/getting-started-with-restive-plugin ，并使用CSS媒体查询这里的运行比较： HTTP：//blog.restive .IO /职位/ 4887492 / CSS媒体查询-VS-动荡，插件

针对您的特定情况的安装和设置为：

<!-- Install JQuery version 1.7 or higher -->
<script type="text/javascript" src="jquery.min.js"></script>

<!-- Install Restive Plugin -->
<script type="text/javascript" src="restive.min.js"></script>

<!-- Setup Plugin -->
<script>
$( document ).ready(function() {
    $('body').restive({
        breakpoints: ['250', '320', '480', '620', '710', '940'],
        classes: ['rp_250', 'rp_320', 'rp_480', 'rp_620', 'rp_710', 'rp_940'],
        turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet',
        force_dip: true
    });
});
</script>

breakpoints和classes管理您的断点以及随后向DOM添加的类。 因此，如您所见，Restive插件将创建以下断点范围： 0 to 250 251 to 320 320、321 321 to 480 481 to 620 621 to 710和711 to 940 。 然后，当移动设备匹配所述断点时，它将在classes添加相应的值。

因此，如果iPhone 3GS访问您的网站，则rp_320将被添加到<body>标记的class属性中（因为该设备的视口宽度为320像素，因此）。

turbo_classes是Restive插件的一项特殊功能，它将在满足特定条件的情况下将类添加到<body>标记中。 因此，如果设备is_mobile ，它将添加mobi ；如果设备is_phone ，它将添加phone ，依此类推。 您可以从Restive插件文档中获得更多深入的信息

force_dip强制Restive插件使用独立于设备的像素作为breakpoints （默认行为是使用设备像素），以便将iPhone3GS （像素比为1）和iPhone 4S （像素比为2）捕获到相同的像素。断点，即251 to 320 ，这是CSS Media Queries会做的。

因此，在上述设置中，如果设备是iPhone 4S或iPhone 3GS ，则Restive插件会将mobi phone rp_320添加到<body>标签的class属性中。

安装和设置后，您要做的所有其他操作都是纯CSS，无需媒体查询。

因此，如果您想为251 to 320断点捕获的设备做一些事情，只需将其添加到CSS文件中即可，例如，菜单栏容器：

.mobi.rp_320 .menuBarContainer {display: none;}

这将隐藏该断点内任何设备的菜单栏。

但是，您还可以进行更广泛的操作，例如在所有电话上隐藏菜单栏容器（启用了turbo_classes功能）：

.mobi.phone .menuBarContainer {display: none;}

您也可以为平板电脑做类似的事情：

.mobi.tablet .menuBarContainer {display: none;}

现在，您可以自由地使用纯CSS来构建网站和设置复杂的行为安排，而不必担心@media查询。 Restive插件在... errmm ...前端中对您有很多帮助？

可能需要适应不同的思维方式，但将来可能会帮助您在构建响应式网站时更加敏捷。

全面披露 ：我开发了插件。

CSS媒体查询无法正常工作

问题描述

问题

也许

网站

3 个解决方案

解决方案1
1 2013-12-14 14:27:03

解决方案2
0 已采纳

解决方案3
0 2013-12-16 19:35:15

CSS媒体查询无法正常工作

问题描述

问题

也许

网站

3 个解决方案

解决方案1 1 2013-12-14 14:27:03

解决方案2 0 已采纳

解决方案3 0 2013-12-16 19:35:15

解决方案1
1 2013-12-14 14:27:03

解决方案2
0 已采纳

解决方案3
0 2013-12-16 19:35:15