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

我正在处理响应式设计。我的目标是让我的网站响应各种规模。CSS - 媒体查询响应式设计 - 高度相同但宽度增加

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

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

例如：400x300的为500x300 600×300

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

2017-04-12 Pathway

不知道如果我找不到你，但是如果你没有为元素设置修复高度，那么高度会相应地改变为字体大小。请参阅https://jsfiddle.net/9L4kaq1p/ – caramba

在媒体查询中使用AND来指定特定的宽度和高度，例如@ media（min-height：500px）和（min-width：580px）{*} */ } –

什么高度？设备？已经有各种设备宽度，高度和比率，你现在的做事方式是好的，不是吗？ – FelipeAls

-2

我用这个：

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

希望它能帮助！

2017-04-12 09:08:57

解释为什么这会有所帮助，将不胜感激 – Swellar

内容调整到设备的宽度 –

@JonA - 这不是什么意思......我也没有看到这与问题的相关性。 – Quentin

所以当其他用户以前说过你想要做的第一件事就是在HTML标题此meta标签：

<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中选择元素时一样。

2017-04-12 09:28:58

回答