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

Question

如何在支持各种屏幕尺寸的html-css页面中重新排列图标，图像和标签。我想要一个响应各种屏幕尺寸的页面。它应该兼容PC，Iphone，Ipad浏览器。

可以使用响应式网页设计来完成吗？

如果是，我怎样才能实现它。 一段代码对我理解这个主题非常有用。

Answer 1

是的，响应式设计就是您想要的。

如果您想根据屏幕尺寸更改样式，只需将其添加到CSS中：

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

}

对于很多宽度来说，习惯使用%代替px也很重要。此外，请务必了解子元素的继承，这对于使用%非常重要。在CSS中了解min-width和max-width也很不错。

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

HTML：

<div class=textbox >
    This is a textbox
</div>
<div class=textbox >
    This is a textbox
</div>
<div class=textbox >
    This is a textbox
</div>

CSS：

.textbox {
    height: 100px;
    width: 33.3%
    text-align: center;
    float: left;
}

当屏幕变得足够小以至于您想要垂直而不是水平显示框时，您可以执行此CSS媒体查询：

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

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

Answer 2

您应该使用媒体查询或引导来进行响应式网页设计。

对于特定的屏幕尺寸，

媒体查询就像是跟随：

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

}

您可以在互联网上找到大量媒体查询和引导资料。
用于媒体查询。 This是理解的好材料。 此外，您可以在互联网上找到许多响应式模板。