em 中的“最大”响应断点答案

【问题标题】：'Max' Responsive Breakpoints in emem 中的“最大”响应断点
【发布时间】：2014-09-19 13:23:15
【问题描述】：

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

“最大”断点是根据 16 像素的浏览器基线设置的。我了解媒体查询基于浏览器的基本字体大小，它独立于文档上设置的任何基本字体大小。我找到了解释这一点的文章，推荐 em 作为“min”断点，但找不到任何关于“max”的提及。

是否存在设置最大断点以考虑浏览器基线不是 16 像素的情况的最佳做法？

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

$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;

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

【问题讨论】：

你永远不能假设基本字体大小是 16px。如果您一直在进行 1em = 16px 的心算，那么使用 em 有什么意义。那时您也可能正在使用 px 。你应该根据 content 来选择你的断点，而不是一些任意的常见屏幕尺寸。
@cimmanon 我理解，但这并不能真正回答问题——无论我在哪里选择断点，针对特定断点，都会有一个最小值和一个最大值。最大值点应该是下一个断点的最小值减去约 1 个像素。所以我要问的是如何计算最大断点而不必依赖 16px 基本字体大小的假设？

标签： css responsive-design sass breakpoints em

【解决方案1】：

我不确定如何仅使用 CSS 来获得以像素为单位的实际视口根 em 大小，而且我对前端也不是很好。但是您可以尝试以下方法：

$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 所说，阈值应该根据您的内容来决定。但如果我将阈值设为固定数量的像素，它也会变得不成比例。

虽然我可能完全错了，但我也希望有一些 cmets 了解这种方法！

【讨论】：