Question

我想让我的徽标（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像素-您会看到红色字体和黄色背景。

Answer 2

我不确定您的意思是什么，但是在这里您有建立响应式网站的基础。

.link {
  color: white;
}

body {
  background: #4d4d4d;
  margin: 0;
  background-size: cover;
  align-content: center;
  width: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.mt-100 {
  font-size: 22px;
  align-content: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 100;
  transition: 0.24s;
}

.banner {
  text-align: center;
  color: white;
  overflow: hidden;
  width: 60%;
  transition: 0.24s;
}

.logo {
  background-size: cover;
  height: 200px;
  width: 200px;
  margin-top: 30px;
  transition: 0.24s;
}

@media screen and (max-width: 765px) {
  .banner {
    width: 100%;
  }

  .logo {
    height: 100px;
    width: 100px;
  }

  .mt-100 {
    font-size: 18px;
  }
}

<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>

我的网站如何支持移动设备

2 个答案: