HTML、CSS：响应式 header，带有徽标和文字

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° 像照片中那样在徽标下方，但是如果 phone 的宽度更小或更大，徽标和文本应该变小或变大（响应式） .

Answer 1

如果想让文字在不同的设备宽度上变成larger/smaller，需要加上Media Screens

这是媒体屏幕的示例

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

这是在设备的最大宽度为 940px（平板电脑的平均尺寸）时执行的操作。 h1 的字体大小设置为不同的大小。

HTML、CSS：响应式 header，带有徽标和文字

HTML, CSS : Responsive header with logo and text

html

css

responsive

velo