CSS Dimension 最佳实践 - 元素高度/宽度（像素或百分比）答案

【问题标题】：CSS Dimension Best Practices - Elements Height/Width (pixels or %)CSS Dimension 最佳实践 - 元素高度/宽度（像素或百分比）
【发布时间】：2011-08-11 17:07:12
【问题描述】：

我的问题是关于设置元素大小的最佳方式，我应该将其设置为 % 还是 px？

我正在做我的工作中的网络应用程序，并且我正在以百分比设置每个高度/宽度。这是最好的方法吗？

最好的意思是在各种显示器尺寸和分辨率以及跨浏览器上正确显示。

示例代码：

html
{
    height:100%;
}

body
{
    height:100%;
}

div.title
{
    background-color:Gray;
    padding:0;
    margin:0;
    float:left;
    width:100%;
}

form#ct101
{
    height:100%;
}

它一直持续下去。

谢谢

【问题讨论】：

标签： css height width dimension

【解决方案1】：

我知道这个问题很老了，但在不相关的谷歌搜索中出现了未回答的问题......

只要表单是屏幕上唯一的东西，我会将高度保持在 100%。这将真正独立于您的应用程序。另一方面，宽度...

使用@media，您可以为移动设备和桌面用户设计表单。

示例：

@media screen and (max-width: 645px) {
form#ct101 {
width: 100%; 
} }
@media screen and (min-width: 646px) {
form#ct101 {
width: 600px; 
} }

这将使您的表单填满移动设备上的屏幕，以便它们有最大的空间来查看它们，然后让它们在显示器上不那么大，因此表单输入不会太长。理论上，表单字段越长，填写的时间就越长，并且会从表单中脱落/弹跳。

【讨论】：

【解决方案2】：

这真的取决于你想要做什么。例如，对于内容标签，我通常喜欢使用 80-95%。如果我正在制作登录屏幕，我会使用 30-40% 或固定宽度，具体取决于页面其余部分的外观。

【讨论】：