Question

我正在使用SASS在基于Bootstrap 3的em中使用媒体查询开发响应式网站。

'max'断点是基于16px的浏览器基线设置的。我理解媒体查询是基于浏览器的基本字体大小，它与文档上设置的任何基本字体大小无关。我找到了解释这个问题的文章，推荐用于'min'断点的em，但找不到'max'的任何提及。

是否有设置最大断点的最佳做法，以考虑浏览器基线不是16px的情况？

我目前正在使用以下内容：

$screen-xs:                  30em !default;
$screen-xs-min:              $screen-xs !default;
$screen-phone:               $screen-xs-min !default;

$screen-sm:                  48em !default;
$screen-sm-min:              $screen-sm !default;
$screen-tablet:              $screen-sm-min !default;

$screen-md:                  62em !default;
$screen-md-min:              $screen-md !default;
$screen-desktop:             $screen-md-min !default;

$screen-lg:                  75em !default;
$screen-lg-min:              $screen-lg !default;
$screen-lg-desktop:          $screen-lg-min !default;

$screen-xs-max:              ($screen-sm-min - (1 / 16)) !default;
$screen-sm-max:              ($screen-md-min - (1 / 16)) !default;
$screen-md-max:              ($screen-lg-min - (1 / 16)) !default;

这很好，假设浏览器的基本字体大小是16px但是如果浏览器的基本字体大小不是16px，那么$ screen - ** - max将不再有效。

Answer 1

我不确定如何仅使用CSS获取实际的视口根目标大小（以像素为单位），而且前端也不是很好。但是你可以试试这里的事情：

$em-base:           1em
$px:                rem($em-base/16)
$px-relative:       em($em-base/16)
$display-threshold: 800*$px

=small-screens
    @media screen and (max-width: $display-threshold*0.6)
        @content

=medium-screens
    @media screen and (min-width: $display-threshold*0.6+0.001) and (max-width: $display-threshold)
        @content

=large-screens
    @media screen and (min-width: $display-threshold+0.001)
        @content

我猜您想根据根em大小计算断点。我正在使用我非常简单的布局测试类似的东西，这是一堆中间的博客文本，这可以满足我的要求。

我们的想法是设计16px作为根em大小。因此$ px是/16。但仍允许设计相对破坏，因为所有其他元素大小，空间等都是在模块化规模的帮助下相对计算的。

正如@cimmanon所说，门槛应该根据你的内容决定。但是，如果我将阈值设为固定数量的像素，它将变得不成比例。

我可能完全错了，并且也会对这种方法提出一些意见！

“最大”的响应断点

1 个答案: