Html 如何为metro用户界面创建具有响应高度的网页？

我想用HTML和CSS设计Metro用户界面，我想在不同的设备中改变盒子的高度。我用百分比表示宽度。我知道它也可以用于身高。但是如果我使用高度百分比，如果你垂直收缩浏览器，高度会越来越小

另一个问题是，如果同时使用多个显示器查看桌面，宽度将比高度大得多，因此框的高度和宽度将更小

在我的情况下，有没有一种有效的方法来创建一个响应性强的网站

注意：我不想要垂直滚动

是否有以有效方式做出响应的建议或经验？ 谢谢你

试着这样做：

div{
/*视口的25%*/
高度：25vh；
宽度：15雷姆；
背景色：#222；
颜色：#eee；
字体系列：monospace；
填充：2rem；
}

响应高度

尝试如下：

div{
/*视口的25%*/
高度：25vh；
宽度：15雷姆；
背景色：#222；
颜色：#eee；
字体系列：monospace；
填充：2rem；
}

---

responsive height

从

vw

开始，以获得与小屏幕视图宽度成比例的所需

高度

然后，在我的示例中，当查看器超过某个
宽度
-1080px后，使用

这使得该元素在小屏幕和超大屏幕上都能正常工作，extra宽屏幕，并且查看器的垂直大小不会对其产生任何影响


#徽标{
高度：26vw；
宽度：自动；
}
@媒体屏幕和屏幕（最小宽度：1080px）{
#标志{
高度：300px；
}
}
从
vw
开始，以获得与小屏幕视图宽度成比例的所需
高度

然后，在我的示例中，当查看器超过某个
宽度
-1080px后，使用

这使得该元素在小屏幕和超大屏幕上都能正常工作，extra宽屏幕，并且查看器的垂直大小不会对其产生任何影响


#徽标{
高度：26vw；
宽度：自动；
}
@媒体屏幕和屏幕（最小宽度：1080px）{
#标志{
高度：300px；
}
}

*{
保证金：0；
填充：0；
}
.侧箱{
背景：红色；
宽度：250px；
高度：100vh；
}


*{
保证金：0；
填充：0；
}
.侧箱{
背景：红色；
宽度：250px；
高度：100vh；
}

我说过我使用了百分比，vh表示视口高度。和我做的一样。我提到的其他情况呢？多个监视器？我说我用了百分比，vh表示视口高度。和我做的一样。我提到的其他情况呢？多显示器？谢谢，但我的问题是关于身高，我在我的报告中提到过question@Parsamhn同样的想法仍然适用。您可以在
vw
单位中设置
高度。我编辑了这个示例。非常感谢，但是如果屏幕宽度为3600，高度为980，那么我的框的宽度将比其高度更大。可以吗？有什么建议吗？另一个问题是，如果有人想把浏览器从高度上缩小（盒子也会缩小），那这个呢？谢谢，但我的问题是关于高度的，我在我的文章中提到过question@Parsamhn同样的想法仍然适用。您可以在
vw
单位中设置
高度。我编辑了这个示例。非常感谢，但是如果屏幕宽度为3600，高度为980，那么我的框的宽度将比其高度更大。可以吗？有什么建议吗？另一个问题是，如果有人要从高度上缩小浏览器（框也会缩小），那么这个呢？