html - 使用 CSS 保持元素的最佳宽度

Question

我想确保 HTML 元素（在本例中为输入框）在不同的屏幕分辨率上保持“最佳”宽度。

我的主观规则（为简单起见：忽略边距的需要）：

1. 最初将元素的宽度设置为窗口宽度的 40%
2. 如果元素的大小低于某个宽度（例如 200 像素），请保持该最小宽度
3. 如果元素不适合屏幕（在此示例中：窗口宽度小于 200 像素），请将元素的宽度设置为窗口宽度

这可以使用纯 CSS 来实现（并且仍然支持 IE8）吗？

Answer 1

.input_box {
   width: 40%;
}


@media (max-width:500px) { /* 40% of 500px is 200px */
    .input_box {
        width: 200px;
    }
}

@media (max-width:200px) { /* full width when the screen is smaller than 200 px */
    .input_box {
        width: 100%;
    }
}

编辑：这里的工作示例http://jsfiddle.net/PXYRN/和https://code.google.com/p/css3-mediaqueries-js/用于 IE8 支持

Answer 2

正如其他人所说，您可以使用媒体查询，这是满足您要求的工作示例。

input {
  width:40%;
  min-width:200px;
}
@media (max-width: 200px) {
  input {
    width:100%;
    min-width: 0;
  }
}

http://jsfiddle.net/bEvUZ/

Answer 3

是的，

有多种方法可以做到这一点。

您可以使用媒体查询、flexbox，也可以使用 box-sizing。

在您的情况下，媒体查询正是您所需要的。它被称为“响应式设计”。

前任 ：

@media screen and (max-width: 640px) {
  .bloc {
    width : 40%;
  }
}

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/