如果 50% 宽度太小，请使用 100% div 宽度

Question

如何创建一个默认大小为XX%的div，但是，如果屏幕太小，它会切换到100%大小？我尝试使用min-width属性，但问题是它在达到min-width后不会响应，如果屏幕更小，它会溢出。

Answer 1

您必须使用@media查询。因此，假设您有一个应该只占网页 50% 的<div>，然后您需要在它进入手机后显示全宽，比如说640px宽度：

div {
  width: 50%;
}
@media screen and (max-width: 640px) {
  div {
    width: 100%;
  }
}

Answer 2

你必须像这样使用@media：

@media screen and (min-width: 769px) {
    /* STYLES HERE */
}
@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES HERE */
}
@media only screen and (max-device-width: 480px) {
    /* STYLES HERE */
}

Answer 3

您可以使用

@media查询来执行此操作，例如：

div {
  width: 50%;
  height: 100px;
  border: 1px solid;
}
@media (max-width: 568px) { /* adjust to your needs */
  div {width: 100%}
}

<div></div>