如何使我的 png 图像和文本容器响应不同尺寸的屏幕？

Question

作为业余爱好，我是网络开发的新手。
我为我的投资组合网站创建了一个登陆页面，以供将来的项目使用。不幸的是，它在我的笔记本电脑和手机 phone 上看起来与在我的台式机上看起来不同。 https://frscott.github.io

看起来浅蓝色容器是有响应的，但不是我的白色文本或 png 图片。

代码如下：

body {
  margin: 0;
}

.background {
  background-color: white;
}

.center {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.curved {
  position: relatve;
  background: #62b1ff;
  height: 42vh;
  border-bottom-left-radius: 50% 0%;
  border-bottom-right-radius: 50% 0%;
}

.heading {
  position: relative;
  margin-top: 2px;
  margin-bottom: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 50px;
  font-weight: 600;
  color: white;
  text-align: center;
}

.buttonContainer {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  background-color: gray;
  border: 2px solid gray;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-size: large;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: white;
  color: rgb(53, 53, 53);
}

.a {
  color: rgb(53, 53, 53);
}

.a:hover {
  background-color: lawngreen;
}

.b {
  color: rgb(53, 53, 53);
}

.b:hover {
  background-color: rgb(253, 123, 188);
}

.c {
  color: rgb(53, 53, 53);
}

.c:hover {
  background-color: yellow;
}

.text {
  margin-top: 5px;
}

.paragraph {
  font-family: 'DM Mono', monospace;
  font-size: x-large;
  font-weight: 600;
  color: rgb(53, 53, 53);
  text-align: center;
  line-height: 3;
}

.footer {
  margin-top: 50px;
  font-family: 'DM Mono', monospace;
  font-size: x-large;
  font-weight: 600;
  color: rgb(53, 53, 53);
  text-align: center;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Home</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300&family=Open+Sans:wght@600&family=Squada+One&display=swap" rel="stylesheet">
</head>


<body class="background">
  <section class="curved">
    <img id="avatar" class="center" width="300" height="318" src="avataaars.png" alt="Avatar Head">
    <h1 class="center heading">Hello, I am Scott Franz.</h1>
  </section>

  <div class="buttonContainer">
    <button onclick="document.getElementById('avatar').src='beard.png'">Check Current Facial Hair Situation</button>
  </div>
  <section class="text">
    <div class="paragraph">
      <p>I manage, <u><a class="a" href="https://www.google.com">visualize</a></u>, and <u><a class="b" href="https://www.google.com">analyze</a></u> data.<br> I create <u><a class="c" href="https://www.google.com">websites</a></u> and <u><a class="a" href="https://www.google.com">applications</a></u> for
        fun. <br> I write <u><a class="b" href="https://www.google.com">visual-essays</a></u> that explore interesting <u><a class="c" href="https://www.google.com">topics</a></u>. <br> I am keen on <u><a class="a" href="https://www.google.com">collaboration</a></u> and/or
        <u><a class="b" href="https://www.google.com">freelance work</a></u>. </p>
    </div>
    <div class="footer">
      <p> <strong><u><a class="a" href="https://www.google.com">email</a></u> | <u><a class="b" href="https://www.google.com">github</a></u> | <u><a class="c" href="https://www.google.com">observable</a></u></strong> </p>
    </div>
  </section>

</body>

</html>

Answer 1

我建议你不要在.curved元素上使用固定的height并固定img的比例，将它们替换为CSS。

已将 #avatar 添加到 CSS，固定高度 .curved 并替换 img 比例，请看。

body {
  margin:0;
}

.background {
  background-color: white;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.curved {
  position: relative;
  background: #62b1ff;
  border-bottom-left-radius: 50% 0%;
  border-bottom-right-radius: 50% 0%;
}

#avatar {
  max-width: 300px;
  width: 30vw; /* will add a little responsivness to an image */
}

.heading {
  margin-top: 2px;
  margin-bottom: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 5vw; /* now the h1 will be more flexible */
  font-weight: 600;
  color: white;
  text-align: center;
}

.buttonContainer {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
  background-color: gray;
  border: 2px solid gray;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-size: large;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 4px;
}


button:hover {
  background-color: white;
  color: rgb(53, 53, 53);
}

.a {
  color: rgb(53, 53, 53);
}

.a:hover {
  background-color: lawngreen;
}

.b {
  color: rgb(53, 53, 53);
}

.b:hover {
  background-color: rgb(253, 123, 188);
}

.c {
  color: rgb(53, 53, 53);
}

.c:hover {
  background-color: yellow;
}

.text {
  margin-top: 5px;
}

.paragraph {
  font-family: 'DM Mono', monospace;
  font-size: x-large;
  font-weight: 600;
  color: rgb(53, 53, 53);
  text-align: center;
  line-height: 3;
}

.footer {
  margin-top: 50px;
  font-family: 'DM Mono', monospace;
  font-size: x-large;
  font-weight: 600;
  color: rgb(53, 53, 53);
  text-align: center;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300&family=Open+Sans:wght@600&family=Squada+One&display=swap" rel="stylesheet">
  </head>


  <body class="background">
    <section class="curved">
      <img id="avatar" class="center" src="https://frscott.github.io/avataaars.png" alt="Avatar Head">
      <h1 class="center heading">Hello, I am Scott Franz.</h1>
    </section>
    
    <div class="buttonContainer">
    <button onclick="document.getElementById('avatar').src='https://frscott.github.io/beard.png'">Current Facial Hair Status</button>
  </div>
    <section class= "text">
      <div class="paragraph">
        <p>I manage, <u><a class="a" href="https://www.google.com">visualize</a></u>, and <u><a class="b" href="https://www.google.com">analyze</a></u> data.<br>
          I create <u><a class="c" href="https://www.google.com">websites</a></u> and <u><a class="a" href="https://www.google.com">applications</a></u> for fun. <br>
          I write <u><a class="b" href="https://www.google.com">visual-essays</a></u> that explore interesting <u><a class="c" href="https://www.google.com">topics</a></u>. <br>
          I am keen on <u><a class="a" href="https://www.google.com">collaboration</a></u> and/or <u><a class="b" href="https://www.google.com">freelance work</a></u>. </p>
      </div>
      <div class="footer">
        <p> <strong><u><a class="a" href="https://www.google.com">email</a></u> | <u><a class="b" href="https://www.google.com">github</a></u> | <u><a class="c" href="https://www.google.com">observable</a></u></strong> </p> 
      </div>
    </section>

  </body>
</html>

如何使我的 png 图像和文本容器响应不同尺寸的屏幕？

How to make my png image and text container responsive to different size screens?

html

javascript

css

responsive-design