尝试使个人资料图片和文本响应

Question

我正在尝试让我的个人资料图片和关于我的文本响应，我正在使用 bootstrap v5，我正在使用百分比来获得对个人资料图片的某种响应，有没有更好的方法使个人资料图片响应 phone、平板电脑和 1080p 屏幕。我目前正在为移动优先设计，然后会针对其他分辨率做一些调整。

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Sheldon's Online Portfolio</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="mystyle.css" rel="stylesheet">
  </head>
  <body>
    <div class = "navbar navbar-default navbar-fixed-top">
      <nav class = navlist>

        </span>
      </nav>
    </div>

      <div class = "container">
        <div class = "profile-pic">
          <img src= "Images used/Profile Pic.png" class="img-thumbnail" alt = "No Image"/>
        </div>
          <img src= "Images used/photo-1542831371-29b0f74f9713.jpeg" class="img-fluid" alt = "No Image"/>

          <div class = "container-sm">
            <h1>About Me</h1>
            <div class = "container-sm-t">
            <p></p>
          </div>
      </div>



  </body>
</html>

CSS

.navbar
{
  background-color: #2A3956;
  box-shadow: inset 0.5px 0.5px 5px 0.5px #02d3f6;
  border: 1px solid #02d3f6;
}

.navbar-default
{
  border:0;
}

.container
{
  padding: 0px;
  margin: 0px;
}
.img-fluid
{
  border: 1px solid #02d3f6;
  max-width: 100%;
  height: auto;
}

.container-sm
{
 background-color: #2A3956;
 box-shadow: inset 0.5px 0.5px 5px 0.5px #02d3f6;
 border: 1px solid #02d3f6;
 min-height: 340px;
}

.profile-pic
{
  position: absolute;
  margin-left: 32%;
  margin-top: 54%;
  margin-right: auto;
  margin-bottom: auto;
}

.img-thumbnail
{

  border: 1px solid #02d3f6;
  max-width: 50%;
  border-radius: 100px;

}
.container-sm h1
{
  color:#07DD45;
  margin-top: 21%;
  font-size:25px;
  margin-left: 30%;
}

.container-sm-txt p
{
  color:#07DD45;
  font-size:15px;
}

有没有更好的方法来达到我想要的结果？

Answer 1

您可以在 CSS 中使用媒体查询。在我看来，媒体查询是处理响应的最佳方式。

如果您不知道如何使用媒体查询，请观看此视频：https://www.youtube.com/watch?v=yU7jJ3NbPdA

一定能帮你解决问题:)

尝试使个人资料图片和文本响应

Trying to make Profile pic and text responsive

html

css

responsive-design

bootstrap-5