Html CSS-媒体查询响应设计-高度相同但宽度增加

我在做响应性设计。我的目标是使我的网站对所有尺寸的产品都能做出响应

通常，随着设备宽度的增加，我会增加元素的字体大小

但是如果宽度增加而高度保持不变呢？我在创建响应性设计时考虑了这个场景

例如：400x300 500x300 600x300

在这种情况下，随着宽度的增加，我会增加字体大小。但是高度保持不变会导致元素过大，因为当字体大小增加时，高度保持不变。

我使用以下方法：

---

希望有帮助

因此，正如其他用户之前所说，您首先要做的是在html标题中包含此meta标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

---

此@media仅当视口在指定范围内时才允许CSS运行，在本例中为300px和400px之间。您可以将其视为任何常规CSS修改，更改高度、字体大小、颜色、背景等。只需记住使用花括号{}打开和关闭@media即可就像在CSS中选择元素时一样。

我不确定是否正确，但如果没有为元素设置固定高度，则高度将相应地随字体大小而变化。请参见此处：使用和在媒体查询中以特定的宽度和高度为目标，例如@media（最小高度：500px）和（最小宽度：580px）{/*CSS stuff*/}什么的高度？装置？现在已经有了各种各样的设备宽度、高度和比率，而你目前的做法还行，是吗？解释一下为什么这会很有帮助。内容会根据屏幕的宽度进行调整device@JonA-这不是什么意思…我也看不出这与问题的相关性。这是我在asp.net上使用的，它做得很好。@JonA-你选择的服务器端技术是不相关的，虽然

元素完成了它设计要做的工作，但这并不是问题要问的工作。

@media (min-width:300px) and (max-width:400px){
     .myClass{
       height: 18em;
       font-size: 1em;
     }
    }