Question

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

Answer 1

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

div {
  width: 50%;
}

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

Answer 2

您可以使用@media 查询来执行此操作，例如：

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 3

你必须使用@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 */
}

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

3 个答案: