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

回答