html - 我的网站如何才能适用于移动设备

Question

我想在全宽调整浏览器大小时使我的 Logo (KP 咨询)和文本响应，但不幸的是，我只是调整了背景图像的大小。也许这并不难，但我不知道问题出在哪里。还需要能够用于移动设备。请帮忙。

HTML

<div class="container">
        <div class="banner">
                <img src="logo1.png" class="logo" width="650px" height="215px">
                    <h4 class="heading mt-100">KP business & financial<br>advisory services d.o.o.
                Beograd<br><br>Resavska 23,<br>1100 Beograd, Srbija<br><br>
                <a href="mailto:office@kp-advisory.com " class="link">office@kp-advisory.com</a>
            </div>
    </div>

CSS

.link {
    color:white;
}

html {
    background: fixed;
}

body {
    margin: 0;
    height: 100%;
    background: url('pozadina.png') no-repeat fixed;
    background-size: cover;
    align-content: center;
    width: 100%;
    /* overflow: hidden; */
}
.container {
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center;
    height: 100vh;
}
.mt-100 {
    margin-top: 80p;
    font-size: 22px;
    align-content: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
    height: 100%;

}
.banner {
    text-align: center;
    color: white;
    margin-top: -190px;
    overflow: hidden;
}

.logo {
  margin-top: 330px;
  background-size: cover;
    width: auto;
}

Answer 1

在 css 中使用媒体查询:https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

编辑:在您的情况下(示例):

.banner {
    text-align: center;
    color: black;
    background-color: green;
}

@media only screen and (max-width: 600px) {
  .banner {
    color: red;
    background-color: yellow;
  }
}

<div class="banner">
  Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</div>

如果您的窗口浏览器最大为 600 像素 - 您会看到红色字体和黄色背景。