Javascript 调整html css页面的大小并重新排列

如何在支持各种屏幕大小的html css页面中重新排列图标、图像和标记。我想要一个网页，这是响应各种屏幕大小。它应该与PC、Iphone、Ipad浏览器兼容

是否可以使用响应式web设计来实现

如果是，我如何实现它。

---

一段代码对我理解这个主题很有帮助。

您应该使用媒体查询或引导进行响应式web设计

对于特定屏幕大小，媒体查询如下所示：

@media screen and (min-width: 768px) and (max-width: 1024px) {

}

@media screen and (max-width: 768px) {

}

你们可以在互联网上找到大量用于媒体查询和引导的资料
用于媒体查询。这是很好的理解材料。

---

此外，您可以在internet上找到许多响应模板

是的，响应性设计正是您想要的

当您想根据屏幕大小更改样式时，只需将其添加到CSS中即可：

@media screen and (min-width: 768px) and (max-width: 1024px) {

}

@media screen and (max-width: 768px) {

}

对于很多宽度，习惯使用

%

而不是

px

也是很重要的。另外，确保知道子元素的继承，这对于使用

%

非常重要。了解CSS中的

minwidth

和

max width

也很好

假设有三个文本框水平显示在屏幕上

HTML:

当屏幕变得足够小，您希望垂直而不是水平显示框时，您可以执行以下CSS媒体查询：

@media screen and (max-width: 768px) {

        .textbox {
            float: none;
            width: 100%;
    }
}