标签: media-queries

有没有办法使用javascript获取用户设备宽度,而不是视口宽度？

正如我所说,CSS媒体查询提供了这一点

@media screen and (max-width:640px) {
    /* ... */
}

和

@media screen and (max-device-width:960px) {
    /* ... */
}

如果我的目标是横向智能手机,这将非常有用.例如,在iOS max-width:640px上,即使在iPhone 4上,也会针对横向和纵向模式进行声明. 据我所知,这不是Android的情况,因此在此实例中使用设备宽度成功地定位两个方向,没有针对桌面设备.

但是,如果我基于设备宽度调用javascript绑定,我似乎仅限于测试视口宽度,这意味着额外的测试,如下所示,

if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }

考虑到设备宽度可用于css,这对我来说似乎并不优雅.

这可能听起来像一个愚蠢的问题.

如果我使用这个CSS片段进行常规显示(其中box-bg.png200px乘200px);

.box{
    background:url('images/box-bg.png') no-repeat top left;
    width:200px;
    height:200px
}

如果我使用这样的媒体查询来定位视网膜显示(使用@ 2x图像作为高分辨率版本);

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{background:url('images/box-bg@2x.png') no-repeat top left;}
}

我是否需要将.boxdiv 的大小加倍到400px乘以400px以匹配新的高分辨率背景图像？

我试图在媒体查询中使用CSS变量,但它不起作用.

:root {
  --mobile-breakpoint: 642px;
}

@media (max-width: var(--mobile-breakpoint)) {

}

我正在尝试将Sass变量的使用与@media查询结合使用,如下所示:

$base_width:1160px;

@media screen and (max-width: 1170px) {$base_width: 960px;}
@media screen and (min-width: 1171px) {$base_width: 1160px;}

$base_width 然后在基于样式表宽度百分比的测量中的各个点处定义,以产生流体布局.

当我这样做时,变量似乎被正确识别,但媒体查询的条件不是.例如,无论屏幕宽度如何,上面的代码都会产生1160px的布局.如果我像这样触发@media语句:

@media screen and (min-width: 1171px) {$base_width: 1160px;}
@media screen and (max-width: 1170px) {$base_width: 960px;}

无论屏幕宽度如何,它都会产生960px的布局.另请注意,如果我删除它的第一行,$base_width: 1160px;则返回未定义变量的错误.我缺少什么想法？

是否有@media查询仅针对iOS运行设备？

例如:

@media (min-device-width:320px) and (max-device-width:768px) {
    #nav {
        yada: yada;
    }
}

这也会改变这些宽度视角的Android设备页面的行为？或者我最后弄错了

从Bootstrap 3开始,不再有用于响应式和标准样式表的单独文件.那么如何轻松删除响应功能呢？

在一些css类中使用less来为不同的分辨率包装css样式会很不错.

我想做点什么:

footer {
  width: 100%;
}

.tablet {
  footer {
    width: 768px;
  }
}

.desktop {
  footer {
    width: 940px;
  }
}

最后这样的结果应该是结果:

footer {
  width: 100%;
}

@media screen and (min-width: 768px) {
  footer {
    width: 768px;
  }
}

@media screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

.tablet可能看起来像这样:

@media screen and (min-width: 768px) {
  .tablet {

  }
}

希望有人有个好主意!

我们如何准确地隔离媒体查询以避免重叠？

例如,如果我们考虑代码:

@media (max-width: 20em) {
    /* for narrow viewport */
}

@media (min-width: 20em) and (max-width: 45em) {
    /* slightly wider viewport */
}

@media (min-width: 45em) {
    /* everything else */
}

在所有支持的浏览器中,准确的20em和45em会发生什么？

我见过人们使用:像799px然后800px的东西,但屏幕宽度为799.5像素呢？(显然不是常规显示器,而是视网膜显示器？)

考虑到规格,我对这里的答案最感兴趣.

编辑: 当屏幕缩小到480px宽度以下时,我可能会问哪个选择器设置了侧边填充？我一直在浏览bootstrap-responsiveness.css一段时间来找到它,但似乎没有任何影响这一点.

原始 我基本上想要删除任何默认填充或边距设置,以便在较小的设备屏幕上响应.

我有一个background color重写上container-fluid选择器和用于更大的屏幕他们完全呈现100%横跨宽度,但它们的屏幕被减小到更小的尺寸,在默认情况下,自举似乎添加余量或填充上container-fluid或container.

<div class="container-fluid">
    <div class="row-fluid">
      test
    </div>
</div>

如果我使用自定义css覆盖Bootstrap的默认样式,我应该覆盖哪些媒体查询或选择器来删除较小屏幕上的填充？

使用CSS媒体查询,您可以使用max-device-width目标设备宽度(例如iPhone或Android设备)和/或max-width以页面宽度为目标.

如果您使用max-device-width,当您更改桌面上浏览器窗口的大小时,CSS将不会更改,因为您的桌面不会更改大小.

如果您使用max-width,当您更改桌面上浏览器窗口的大小时,您可能会看到面向移动的样式,例如触摸友好元素和菜单等等.

现在不推荐使用针对特定浏览器(和设备？),您应该对目标设置更加不可知.这也适用于媒体查询吗？

你为什么要瞄准另一个？推荐哪一个？

这是我在生产网站上使用的媒体查询示例:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {  
    /* Change a menu to fit the screen better, etc... */
}

我倾向于使用max-device-width和max-width.