“最大”的响应断点

时间:2014-09-19 13:23:15

标签: css responsive-design sass breakpoints em

我正在使用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将不再有效。

1 个答案:

答案 0 :(得分:0)

我不确定如何仅使用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所说,门槛应该根据你的内容决定。但是,如果我将阈值设为固定数量的像素,它将变得不成比例。

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