1

为了让移动和桌面网站能够响应其他内容，我在尝试重新创建这个 Wix 网站时确实遇到了很多麻烦。

http://nl.wix.com/website-template/view/html/936?&viewMode=mobile

在此处输入图像描述

在此处输入图像描述

一旦我使用不同的宽度，30° 就会移动到不同的位置，这意味着该站点没有正确响应。我不知道如何解决这个问题。这是我的代码：

HTML：

<body>
    <div class="header">
        <h1>30 &deg;C</h1>
        <div class="clearfix"><img src="./img/banner.png" alt="banner"> </div>
        <p>Beginning application developer</p>
    </div>
</body>

CSS：

.header {
    background-color: #7A7CB1;
    width:100%;
    position:absolute;
    top:0;
    left:0;
}

.header img {
    width: 62.5%;
    margin-top: 2.5%;
    margin-left: 6.75%;
    float:left;
}

.header h1 {
    position: absolute;
    top: 30%;
    left: 30%;
    font-size: 200%;
}

.clearfix {
    overflow: auto;
}

.header p {
    margin-left: 6.75%;
    font-family: Verdana, geneva, sans-serif;
    font-size: 13px;
}

我希望 30° 像照片中那样位于徽标下方，但是如果手机的宽度更小或更大，则徽标和文本应该变得更小或更大（响应式）。

4

1 回答 1

0

如果您希望文本在不同的设备宽度上变大/变小，您需要添加媒体屏幕

这是媒体屏幕的示例

  @media only screen and (max-width:940px){ /* Tablets*/ 
    h1{
       font-size:12px;
}
    }

当设备的最大宽度为 940 像素（平均平板电脑尺寸）时，它的作用是。h1 的字体大小设置为不同的大小。

于 2017-05-08T17:35:16.713 回答