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

Question

我正在开展响应式设计。我的目标是让我的网站适应各种规模。

通常，随着设备宽度的增加，我会增加元素的 font-size 。

但如果宽度增加且高度保持不变怎么办？在创建响应式设计时，我正在考虑这种情况。

例如： 400x300 500x300 600x300

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

Answer 1

正如其他用户之前所说的那样，首先要在你的html标题中包含这个元标记：

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

然后你会转到你的CSS文件并选择一个特定的视角。

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

此@media允许CSS仅在视口位于指定范围内时运行，在本例中为300px和400px之间。您可以像处理任何正常的CSS修改，更改高度，字体大小，颜色，背景等一样对待它。只需记住用大括号{}打开和关闭@media，就像在CSS中选择元素一样。

Answer 2

我用这个：

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

希望它有所帮助！