是否允许/建议在响应式网站中使用高度？

-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

是否允许/建议在响应式网站中使用高度？

回答

相关问题