Question

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

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

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

只有其他纯粹的css我才意识到，即使开始解决这个问题，也就是将填充高度与父级宽度联系起来的百分比填充技巧，但仅此一点是不够的。我需要能够使用min，max语句，以及双向打宽度和高度。

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

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

这样的事情：https://gist.github.com/scottjehl/2051999以及将这些返回值导入css的方法应该有效，不是吗？在其他任何事情发生之前，是否会使网站放慢速度以使js首先调用？

此外，需要找到正确的方法来进行所有这些计算。我应该只是使用javascript来完成所有的计算并完全保留下面的css之类的内容吗？

$ gutter：calc（（（100vh + 100vw）/ 2）* 0.04）

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

$ column-width：calc（100vw - （1.7778 *（100vh - 2 * $ gutter）） - 3 * $ gutter）

你明白了。我想我已经接近了用css做的事情。 JS解决方案？混合动力？还有别的吗？

THX。

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

使用返回的视口查询作为SASS变量

1 个答案: