Question

我在尝试重新创建这个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°低于照片中的徽标，但如果手机的宽度更小或更大，徽标和文字应该变得更小或更大（反应灵敏）。

Answer 1

如果您希望文字在不同的设备宽度上变大或变小，则需要添加Media Screens

以下是媒体屏幕的示例

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

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

HTML，CSS：带有徽标和文字的响应式标题

1 个答案: