首页 文章

'Max' em中的响应断点

提问于
浏览 次
-1

我正在使用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，则屏幕 - ** - max将不再有效 .

css responsive-design sass breakpoints em

1 回答

  • 0

    我不知道如何仅使用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

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

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

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

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

    回复于

相关问题