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

Question

我正在从事响应式设计。我的目标是让我的网站响应所有大小。

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

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

例如:400x300 500x300 600x300

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

Answer 1

正如其他用户之前所说，您首先要做的是在您的 html header 中包含此元标记:

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

然后您将转到您的 CSS 文件并选择特定的 View 大小。

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

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