Question

我是bootstrap的新手，对于一般的网络编程我还是一个新手。

我编写了部分页面，效果很好。但是，我没有为较小的设备做好准备。我的工作高度设置为400px。然而，当我使用手机时，它会被水平压扁，所以我只是做了一半，它的一半包裹在底部。

然而，大小仍然设置为400px，所以它混淆了很多东西。解决此问题的最简单方法是在屏幕为md或更大时，将高度设置为400px，当它小于此值时，将高度设置为800px。

我在网上搜索解决方案，我发现媒体查询应该能够做到这一点。

这就是我之前的情况，高度始终设置为400px

.addon {height:400px;}

当然，当屏幕为md或更大时，这个高度设置为400px并且工作正常。

这是我尝试做的事情。

@media (min-width: @screen-md-min) 
{
    .addon {height:400px;}
}

@media (max-width: @screen-sm-max)
{
    .addon {height:800px}
}

此代码绝对没有任何反应。无论屏幕大小如何，两种高度都不会被应用。

根据我在网上阅读和看到的内容，我觉得这应该有效。

我错过了什么？

Answer 1

显然，使用变量@screen-md-min和@screen-sm-max是LESS变量，我没有使用它们。替换具有实际像素值的那些工作。所以这是工作代码。

@media (min-width: 992px) 
{
    .addon {height:400px;}
}

@media (max-width: 991px)
{
    .addon {height:800px}

}

Answer 2

我建议使用像boot-xx-12这样的twitter引导类，它将应用它的容器分成12列，并在屏幕调整大小时自动更改大小。但是，如果您不应用view-port = 1.0元标记

，它将无法工作