HTML，CSS：带有徽标和文本的响应式标题答案

【问题标题】：HTML, CSS : Responsive header with logo and textHTML，CSS：带有徽标和文本的响应式标题
【发布时间】：2017-05-08 16:10:30
【问题描述】：

我在尝试重新创建这个 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° 像照片中那样位于徽标下方，但如果手机的宽度更小或更大，则徽标和文字应该变得更小或更大（响应式）。

【问题讨论】：

有什么问题？
您希望最终产品是什么样的？温度计一直向右30度？下面的文字？
我希望网站能够响应。所以30度应该更小，如果手机的宽度越小，logo就越大。问题是 30 度的位置应该保持在照片上的位置，但它不在不同的宽度上
当使用百分比设置字体大小时，它使用文档基本字体大小的百分比，而不是像宽度和高度这样的容器。 Arun 的回答涵盖了如何根据屏幕/窗口宽度更改字体大小。至于定位，你能做个小提琴吗？我很乐意修改它以正确定位并解释当前导致问题的原因。
或者，为了平滑地缩放字体大小，您可以使用视口宽度单位 (vw)。不幸的是，这将与窗口而不是您的图像一起缩放，但可以通过一些调整来实现。同样，如果您可以上传图片并制作小提琴，我会看看我能做什么:)

标签： html css responsive velo

【解决方案1】：

如果你想让文字在不同的设备宽度上变大/变小，你需要添加Media Screens

这是一个媒体屏幕的示例

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

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

【讨论】：