使用媒体查询在不同设备上定位纵向和横向页面方向的最佳宽度是多少？有什么标准吗？

我到处寻找最好的答案。这里我发现了。

@media (min-width:320px) { /* smartphones,iPhone,portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle),smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets,portrait iPad,landscape e-readers,landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet,landscape iPad,lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets,laptops,and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

我认为这是更好地考虑与移动第一方法。从移动样式表开始，然后应用与其他设备相关的媒体查询。感谢@ryanve。这是link。

// Extra small devices (portrait phones,less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones,576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets,768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops,992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops,1200px and up)
@media (min-width: 1200px) { ... }

代码示例源：https://getbootstrap.com/docs/4.1/layout/overview/

使用.98px的原因是什么？跨浏览器兼容性？

相关：What are the rules for CSS media query overlap?

没有一个很好的方法可以使两个基于px的@media规则相互排斥,没有间隙而没有 repeating the same media query twice and using the not keyword – 这不是非常易读,而是DRY – 并且 the < and > syntax new to Media Queries 4还没有被广泛支持.正如您在我对链接问题的回答中看到的那样,(在此示例中)正好为576px宽的视口将同时匹配max-width：576px和min-width：576px,这可能会导致问题(某些级联不会)将应用来自两个规则的属性.因此,如果大多数作者担心具有非整数像素密度的高分辨率显示不会将每个CSS像素缩放到整个设备像素,那么大多数作者都会选择具有1像素或更小差异的最小约束和最大约束(例如1.5).

实际上,跨浏览器的兼容性是原因：根据Bootstrap的来源,0.02px用于“而不是0.01px来解决Safari中当前的舍入错误.参见https://bugs.webkit.org/show_bug.cgi?id=178261”(可以预见,截至2018年7月仍然没有已修复).从line 31 of _breakpoints.scss开始：

// Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.02px
// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261
//
//    >> breakpoint-max(sm,(xs: 0,sm: 576px,md: 768px,lg: 992px,xl: 1200px))
//    767.98px
@function breakpoint-max($name,$breakpoints: $grid-breakpoints) {
  $next: breakpoint-next($name,$breakpoints);
  @return if($next,breakpoint-min($next,$breakpoints) - .02px,null);
}

我目前有以下宽度特定的媒体查询.

@media only screen and (max-width: 1920px) {
    .toggleMultiSelect .filter {
        width: 566px;
    }
 }

但“.toggleMultiSelect .filter”的宽度在IE中从Chrome / Firefox发生了变化.所以基本上需要在1920px中为IE使用相同css类的不同宽度.从Stackoverflow搜索我发现IE特定的行为可以像下面这样实现.

@media all and (-ms-high-contrast: none),(-ms-high-contrast: active) {
    .toggleMultiSelect .filter {
        width: 575px;
    }
}

所以现在我需要实现分辨率和css类. 575px宽度仅适用于IE和Chrome或firefox应该获得566px.

在此先感谢您的帮助.

在媒体查询中使用以下css

IE 10及以上版本

_:-ms-lang(x),.ie10up { 
       property:value; 
    }

IE 11及以上版本

_:-ms-fullscreen,:root .CLASS_NAME { 
       property:value; 
     }

我有一个项目类和一个紧凑的“修饰符”类：

.item { ... }
.item.compact { /* styles to make .item smaller */ }

这可以。但是，我想添加一个@media查询，当屏幕足够小时，强制.item类紧凑。

一开始，这是我试图做的：

.item { ... }
.item.compact { ... }
@media (max-width: 600px) {
  .item { @extend .item.compact; }
}

但是这会产生以下错误：

You may not @extend an outer selector from within @media. You may only
@extend selectors within the same directive.

如何使用SASS来完成此操作，而无需使用复制/粘贴样式？

简单的答案是：你不能因为Sass不能(或不会)为它组合选择器。您不能进入媒体查询，并扩展媒体查询外的内容。它肯定会很好，如果它只是拿一个它的副本，而不是试图组成选择器。但是这不是你不能的。

使用mixin

如果您有一种情况，您将要在媒体查询内外重用一段代码，并且仍然希望能够扩展它，那么请写一个mixin和extend类：

@mixin foo {
    // do stuff
}

%foo {
    @include foo;
}

// usage
.foo {
    @extend %foo;
}

@media (min-width: 30em) {
    .bar {
        @include foo;
    }
}

从外部扩展媒体查询中的选择器

这不会真正帮助您的用例，但这是另一种选择：

%foo {
  @media (min-width: 20em) {
    color: red;
  }
}

@media (min-width: 30em) {
  %bar {
    background: yellow;
  }
}

// usage
.foo {
  @extend %foo;
}

.bar {
  @extend %bar;
}

等到Sass提升这个限制(或者自己修补)

有一些正在进行的关于这个问题的讨论(请不要为这些线程做贡献，除非你有一些有意义的补充：维护者已经意识到用户希望这个功能，这只是一个如何实现它的问题，语法应该是)。

> https://github.com/sass/sass/issues/1050
> https://github.com/sass/sass/issues/456

我试图在媒体查询中重用一组类作为mixins在整个网站中使用,而不是在html中嵌入非语义类名.

这是我的问题的一个例子.

@media (min-width: 1000px) {

    .foo{width:120px;}
    .foo-2{width:150px;}
}
@media (max-width: 999px) {

    .foo{width:110px;}
    .foo-2{width:120px;}
}

.bar{.foo;}
.bar-2{.foo;}
.bar-3{.foo-2;}

.bar-X永远不会应用任何样式.我可以猜测这种情况正在发生,因为LESS不会在媒体查询中创建.bar-X,因此不会应用任何内容.

这是LESS中的一个错误,还是我永远无法实现的？对此的解决方法将是理想的.

你的问题是一个常见的误解. LESS不处理@media查询,浏览器在LESS完成其工作后执行. LESS只能创建浏览器要读取的CSS代码.所以@media对于LESS来说是“毫无意义的”,就像任何其他选择器(.someClass div表等)一​​样,它只处理@media将要提供给浏览器的内容.

这意味着您需要将@media的所有代码更改为@media块.但是你也不想要一堆重复的代码.因此,创建一个主mixin来设置你的@media代码,然后从媒体查询中调用mixin：

.makeFooGroup(@w1,@w2) {
    .foo {width: @w1}
    .foo-2{width: @w2}
    .bar{.foo}
    .bar-2{.foo}
    .bar-3{.foo-2}
}

@media (min-width: 1000px) {
    .makeFooGroup(120px,150px);
}
@media (max-width: 999px) {
    .makeFooGroup(110px,120px);
}

产生这个css：

@media (min-width: 1000px) {
  .foo {width: 120px;}
  .foo-2 {width: 150px;}
  .bar {width: 120px;}
  .bar-2 {width: 120px;}
  .bar-3 {width: 150px;}
}
@media (max-width: 999px) {
  .foo {width: 110px;}
  .foo-2 {width: 120px;}
  .bar {width: 110px;}
  .bar-2 {width: 110px;}
  .bar-3 {width: 120px;}
}

有关LESS和@media与此相关的更多信息,请参阅：

> CSS pre-processor with a possibility to define variables in a @media query
> Media Query grouping instead of multiple scattered media queries that match