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

如何创建一个默认大小为

XX%

的

div

，但是，如果屏幕太小，它会切换到

100%

大小？我尝试过使用

min-width

属性，但问题是在达到

min-width

后，该属性将不响应，如果屏幕更小，它将溢出。

您必须使用

@media

查询。假设你有一个

，它只占网页的50%，然后你需要在它进入手机后显示全宽，比如说

640px

宽度：

div{
宽度：50%；
}
@媒体屏幕和屏幕（最大宽度：640像素）{
div{
宽度：100%；
}
}

您可以使用

@媒体

查询，例如：

div{
宽度：50%；
高度：100px；
边框：1px实心；
}
@介质（最大宽度：568px）{/*根据需要调整*/
div{宽度：100%}
}

---

您必须使用

@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 */
}

---

媒体的质疑，可能是因为我已经把整个问题读了两遍，这个答案非常合适。很高兴移除。原因是什么？非常感谢你的回答，真的帮了我的忙！