标签: breakpoint-sass

我很困惑,仍然不确定如何用恰当的话来解释这一点.到目前为止,我已经使用Breakpoint设置了我的媒体查询.使用的断点变量看起来像例如:

$menustatictofixed: min-width 900px;

$ breakpoint-to-ems设置为true.我根据以下jQuery代码段的像素值布置了包含所有Breakpoint变量的页面:

$('body').append('<div style="position: fixed; bottom: 0; right: 0; display: inline-block; font-weight: bold; padding: 5px 7px; border-radius: 5px 0 0 0; background: green; color: white; z-index: 9999;">Viewport width <span id="width"></span> px</div>');
var viewportWidth = $(window).width()
$('#width').text(viewportWidth);
$(window).resize(function() {
  var viewportWidth = $(window).width();
    $('#width').text(viewportWidth);
});

一切看起来都很干净.但是在过去的一两天里,我遇到了为模式设置最后断点并让事情表现出可预测性的问题.在某种程度上,首先看起来干净整洁的东西,我现在在逻辑上非常怀疑,实际上是不合适的,不知何故是一团糟.Cuz,如果你看一下下面的截图,窗口的宽度(在Chrome中)与使用window.width的jQuery代码段的宽度不同.如果我用window.innerWidth替换window.width来最终排除滚动条也没有区别.获得正确结果的唯一方法是在等式中添加15个像素:

var viewportWidth = $(window).width() + 15;

整个方程中唯一的问题是window.width是错误的函数选择,最好是使用例如document.documentElement.clientWidth或其他东西或......？对于15个像素代表什么,以一点点hacky方式修复了上面的问题？最好的问候拉尔夫

如何用sass断点实现这个媒体查询？...

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape)

我试过这个,但它也会影响桌面版......

$mobileLandscape: screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape);

@include breakpoint($mobileLandscape) {
}

Is it possible to set the value of a variable once, inside a single sass-breakpoint, rather than each time I use the variable?

In other words, I'd like to do this:

$tab: 600px;
$wp: 100%;

@include breakpoint($tab) {
    $wp: 95%;
}

.alpha {
    // ...
    width: $wp;
}

.beta {
    // ...
    width: $wp;
}

.gamma {
    // ...
    width: $wp;
}

... rather than this:

$tab: 600px;
$wp: 100%;
$wp-tab: 95%;

.alpha {
    // ...
    width: $wp;
    @include breakpoint($tab) …

我设置了几个断点:

$breakpoint-tiny : 0 767px;
$breakpoint-small : 768px 991px ;
$breakpoint-medium : 992px 1229px;
$breakpoint-large : 1230px;

我在断点文档中看到了

您还可以编写OR媒体查询,允许您编写多个不同的基本或复合媒体查询,并在任何查询集匹配时应用它们.

我想要做的是在我的代码中需要时使用这些或查询来定位多个断点.例如:

@include breakpoint($breakpoint-medium, $breakpoint-large){
   .mobile-navigation{display: none;}
}

这可能吗？

我刚安装了Breakpoint,补充道

require "breakpoint"

到我的config.rb,并定义了这些断点

$mobileMedium : 480px;
$tabletVertical : 768px;
$desktopNormal : 1024px;
$desktopWide : 1200px;

到我的_breakpoint.scss.

当我试图使用其中一个断点时,就像这样;

@include breakpoint($mobileMedium) {
…
}

终端告诉我

error sass/screen.scss (Line 27: Undefined mixin 'breakpoint'.)

这是为什么？

我喜欢将Codekit用于带有Susy和Breakpoint的Compass-Poject.

@import "compass";
@import "compass/reset";
@import "susy";
@import "breakpoint";

但是有一条错误消息"要导入的文件未找到或不可读:断点".

我可以在Codekit2中使用Breakpoint吗？

谢谢!