我正在尝试让jQuery处理菜单,而CSS在调整浏览器大小时会对窗口背景做些什么.

所以jQuery做了这样的事情:

if ( $(window).innerWidth() < mediaQueries['small']) {
    // (where 'small' would be 966)
    // Perform jQuery stuff on a menu ul
}

CSS有这样的东西:

@media all and (max-width: 966px) {
    body {
        background: url(smallback.jpg) no-repeat 0 0;
    }
}

当使用Firefox时,有一个17像素(似乎是垂直滚动条宽度)的间隙,其中已经处理了jQuery的东西,但CSS却没有.

由于其他浏览器可能会为其滚动条使用不同的宽度,因此只需在CSS中添加17px就无法解决问题.那么如何让jQuery考虑滚动条呢？$(window).innerWidth()对我来说似乎没有这样做.

任何帮助将不胜感激.

在Firefox,Opera或IE中打开此页面以查找问题的隔离版本.(Chrome和Safari不会遇到这个问题.因此:Webkit:+ 1,Gecko:-1,Trident:-1,Presto:-1.)

我的CSS中有以下媒体查询:

@media screen and (min-width: 0px) and (max-width: 319px) {
    body {background-color:red;}
}

@media screen and (min-width: 320px) and (max-width: 480px) {
    body {background-color:orange;}
}

@media screen and (min-width: 481px) and (max-width: 980px) {
    body {background-color:yellow;}
}

@media screen and (min-width: 981px) and (max-width: 1200px) {
    body {background-color:green;}
}

@media screen and (min-width: 1201px) {
    body {background-color:blue;}
}

以及相应大小的五个iframe:

<iframe frameBorder="0" src="index.html" height="320" width="255" ></iframe>

查询在独立的html文件中启动,但在iframe上下文中查看时,它们在IE9中失败.所有其他浏览器显示OK.

谁知道为什么？谢谢

[编辑]对于记录,父和子html具有相同的docType,并且CSS作为text/css提供.

像素宽度和高度并不总能说明整个故事.这适用于在屏幕上添加或删除项目,但不适合设置正确的图像.使用MBP上的视网膜显示器,设置为屏幕一半的浏览器窗口将具有与当今大多数机器相同的像素宽度.然而,考虑到较高的DPI,显示的图像可能太小.

有没有办法根据DPI更改图像而不是像素宽度和高度？

我有一行X列可能.

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <!-- ... and so on ... -->
    </div>
</div>

现在我想添加margin-top:20px到所有小屏幕列和大屏幕列的相同边距,如果有超过4,因为这将导致显示两个"行",因此需要一些空间.

只有使用CSS,这在某种程度上是可能的吗？

我正在尝试使用Modernizr 2检测媒体查询是否存在,然后在适当时加载respond.js.

我把它放在我的script.js文件中......

Modernizr.load({
  test: Modernizr.mq,
  yep : '',
  nope: 'mylibs/respond.js'
});

我究竟做错了什么？我很惊讶没有关于如何在Modernizr网站上使用媒体查询执行此操作的示例.这是我正在使用的Modernizr的版本......

http://www.modernizr.com/download/#-backgroundsize-borderradius-boxshadow-iepp-respond-mq-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes-load

我正在开发一个响应式网站,其中每个页面都有一个大型英雄形象,在CMS中定义.我想避免在手机上下载该背景图片.

我能想到的唯一方法是在页面的头部有一些内联CSS,如下所示:

<style type="text/css">
    @media only screen and (min-width: 680px) {
        .hero-image { background-image: url(../images/image.jpg); }
    }
</style>

首先,我可以在内联CSS中使用媒体查询吗？

其次,这会避免在手机上下载图像吗？

第三,有更好的方法吗？

谢谢

我们可以在媒体查询中使用">"或"<"符号(大于和小于)吗？例如,我想隐藏所有低于768px的显示器的潜水.我可以这样说一些事情:

@media screen and (min-width<=768px) {}

我现在正在做一个移动网站,并尝试使用CSS3媒体查询来定位不同的设备.我的部分代码如下:

@media screen and (max-width:320px) {
body {
    width: 320px;
}
/* some other style */  
}

正如您所看到的,我必须明确设置主体宽度,以确保它不显示我在普通css中为桌面设置的宽度,即920px.我想知道是否有任何方法可以自动将体宽设置为设备宽度,我不需要每次创建新的时手动设置它@media.

顺便说一句,我还在我的head标签中添加以下代码:

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

我在我的CSS媒体查询中使用厘米来使我的模板响应,而现在我们的智能手机具有非常高的分辨率,使像素过滤器变得困难.我的问题是,为什么所有网站都不使用CM,这使得响应更加简单和实用？使用我不知道的cm有什么可以错过的吗？

编辑:我正在使用min-**device**-width媒体查询.

是否存在任何问题(性能是我的主要考虑因素)如果不是在媒体查询中定义css选择器(示例1),则可以在css选择器中定义媒体查询(示例2).

示例1 - 媒体查询中的css选择器

@media (min-width: 600px) {
  .foo { ... }
  .bar { ... }
  .hello { ... }
  .world{ ... }
}

@media (min-width: 1000px) {
  .foo { ... }
  .bar { ... }
  .hello { ... }
  .world{ ... }
}

@media (min-width: 1500px) {
  .foo { ... }
  .bar { ... }
  .hello { ... }
  .world{ ... }
}

示例2 - css选择器中的媒体查询

.foo {
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... …