javascript - 使用返回的视口(viewport)查询作为 SASS 变量

Question

我只是没有看到有人在谈论这个确切的问题。希望网站能够完全适合任何屏幕，无需滚动。某些元素的比例是固定的( Logo 、视频播放器等)，这意味着其他区域必须非晶态地扩展/收缩，以适应它们的固定行为，这些行为永远不能超过 100% 的宽度或高度。很难解释，但下面 sassmeister 要点中的行为表明它是有效的。为此，我需要能够根据高度定义宽度，反之亦然(宽度 = 高度的 56.25% 等)

我可以使用 vh、vw、vmin、一堆计算函数等让它工作......但是浏览器支持不完整，而且我不知道有一个填充可以平滑所有这些。我的 vh、vw、计算解决方案如下:

http://sassmeister.com/gist/3dee56a4092a86cf070a

我知道，只有其他纯CSS甚至开始解决这个问题，即百分比填充技巧将填充高度与父宽度联系起来，但仅此还不够。我需要能够使用 min、max 语句以及双向的宽度和高度。

所以...除非我弄错了，否则 @media 查询只会返回 true/false，因此它们无法提供实际的视口(viewport)测量来使用，对吧？这就是我真正需要的......可用视口(viewport)高度和宽度的像素精确测量。

这里有什么解决方案吗？我应该使用 javascript 来获取这些确切的尺寸，然后在 javascript 中进行所有排列吗？用JS获取变量，然后传给css？

类似这样的:https://gist.github.com/scottjehl/2051999并且将这些返回值导入 css 的方法应该可以工作，不是吗？在发生其他事情之前先调用 js 会不会导致网站速度减慢太多？

此外，需要找到正确的方法来进行所有这些计算。我应该只使用 javascript 来完成所有计算并完全将以下内容从 css 中删除吗？

$装订线:计算(((100vh + 100vw)/2) * 0.04)

然后在另一个函数中使用该变量:

$column-width: calc(100vw - (1.7778 * (100vh - 2 * $gutter)) - 3 * $gutter)

你明白了。我想我对 css 的作用已经接近尾声了。 JS的解决方案？杂交种？还有别的吗？

谢谢。

Answer 1

听起来您正在寻找媒体查询。

您可以使用以下内容来定位最大宽度为 1200 像素、最小宽度为 800 像素的屏幕:

@media all and (max-width: 1200px) and (min-width: 800px) {
    //some css here
}

查看 bootstrap-sass 实现容器的方式 here .

另请查看其他 SO answer关于媒体查询。

您甚至可以指定横向和纵向布局。

@media (orientation:portrait) { ... }

或纵横比:

@media screen and (device-aspect-ratio: 16/9) { ... }

我希望这有帮助。您可以在媒体查询内部或与媒体查询一起使用一些奇特的装订线计算，这应该会简化一些事情。

此 JavaScript 将返回屏幕高度:

var x = "Total Height: " + screen.height;
document.getElementById("demo").innerHTML=x;

宽度:

var x = "Total Width: " + screen.width;
document.getElementById("demo").innerHTML=x;

一些 JQuery:

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document