我是新手，但对于Web编程来说还是相当新的。
我对页面的一部分进行了编程，效果很好。但是，对于较小的设备，我还没有做好充分的准备。我的工作高度设为400px。但是，当我使用电话时，它的水平太窄了，所以我把它弄成一半包裹在了底部。
但是，尺寸仍然设置为400像素，因此将一堆东西弄乱了。解决此问题的最简单方法是，当屏幕小于或等于md时，将高度设置为400px，小于此值时，将高度设置为800px。
我在网上搜索解决方案，发现媒体查询应该可以做到这一点。
这就是我以前的高度，高度始终设置为400px
.addon {height:400px;}
当然，这会将高度设置为400px，并且在屏幕为
md或更大时像我想要的那样工作。这是我尝试做的尝试。
@media (min-width: @screen-md-min)
{
.addon {height:400px;}
}
@media (max-width: @screen-sm-max)
{
.addon {height:800px}
}
这段代码绝对不会发生任何事情。无论屏幕大小如何，都不会应用两个高度。
根据我在网上阅读和看到的内容，我觉得这应该可行。
我想念什么？
最佳答案
显然，使用变量@screen-md-min和@screen-sm-max是LESS变量，我没有使用过。将其替换为实际像素值即可。这就是工作代码。
@media (min-width: 992px)
{
.addon {height:400px;}
}
@media (max-width: 991px)
{
.addon {height:800px}
}