是否允許/建議在響應式網站中使用高度？

-3

我看到某處不推薦使用高度並使用填充，爲什麼？高度和填充產生相同的結果 - 至少在我的試驗中 - ... ...有沒有理由讓我只是使用填充而不是高度？是否允許/建議在響應式網站中使用高度？

來源

2015-04-22 yayuj

這是一個非常開放的問題，使用高度代替填充有很多原因，但這取決於你在做什麼。如果有人說「沒有理由使用身高」，那麼他們是錯的。具體情況是什麼？ –

只需跟隨James Hay說的話，在響應式網站中使用高度絕對沒問題。 – Funktr0n

其實沒有什麼具體的情況，我試圖尋找一個不使用高度和使用填充的理由。 - 事情是，我沒有看到一個原因，因爲手機有觸摸和垂直滾動。 – yayuj

要回答你的問題的例子 - 當然，您可以在響應式網站中使用高度而不會出現問題。

我認爲你可能已經閱讀了有關使用填充代替高度的內容是爲了保持元素的縱橫比相同，因爲基於百分比的填充相對於元素的寬度，基於百分比的高度相對於它的容器。

一個常見的用例是將YouTube視頻嵌入到響應式wesbite中。

HTML

<div class="video-container"> 
    <iframe src="//www.youtube.com/embed/k_d5jWvBirU?wmode=opaque&amp;rel=0&amp;showinfo=0&amp;modestbranding=1&amp;controls=2&amp;autohide=1" frameborder="0" allowfullscreen=""></iframe> 
</div>

CSS

.video-container { 
    position: relative; 
    width: 100%; 
    height: 0; 
    padding-bottom: 56.25%; 
    background: #000; 
} 
.video-container iframe { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

小提琴這裏：http://jsfiddle.net/84wm08k7/

正如你可以看到video-container的高度設置爲0和padding-bottom設置爲56.25%。這將此元素限制爲視頻的16：9寬高比，並且具有響應性。

來源

2015-04-23 00:49:46 jono

真的很關鍵。關鍵問題是* vertical * padding中的百分比與* horizontal *維數有關。這種古怪使得縱橫比不變。 – vals

如果您使用填充，那麼該頁面將自行伸展以適合屏幕，離開給定數量的邊框（填充）。如果您使用指定的高度（以每個像素爲單位），無論屏幕的分辨率如何，頁面始終是相同的高度。如果您使用高度作爲百分比或某個類似值，則除了空格數量（填充）會因屏幕而異外，其他應該沒有關係。

來源

2015-04-22 23:28:40

這取決於你在做什麼。對於我的很多工作，我會根據內容設置最小高度或最大高度，以使元素增長或縮小。

填充也會起作用，例如，如果您有一個垂直居中的文本元素，則還可以使用填充來控制高度。這完全取決於網站的設計，以及你想要完成的事情。

來源

2015-04-22 23:49:33 buschschwick

-3

這是一個代碼示例，您可以檢查w3schools.com進一步的信息，我選擇在其中您可以操作DOM

function myFunction() { 
 
    document.getElementById("myBtn").style.height = "50px"; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<button type="button" id="myBtn" onclick="myFunction()">Change the height of this button</button> 
 

 

 

 
</body> 
 
</html>

來源

2015-04-23 00:16:34 Riccardo

是否允許/建議在響應式網站中使用高度？

回答

相關問題