如何让我的网站在纵向设备上看起来更好？

问题描述 投票：0回答：1

现在，我的网站在移动设备上看起来像这样：

但是，我希望它看起来像这样：

片段

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-position: center;
  background-size: cover;
}

.section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 2.7s, transform 2s;
  /* Adjusted timing for opacity and transform */
}

.section.reveal {
  opacity: 1;
  transform: translateY(0);
}

body {
  font-size: 14px;
  overflow-x: hidden;
  margin: 0;
  /* Remove default margin */
  padding: 0;
  /* Remove default padding */
}

.fullpage.reveal {
  opacity: 1;
  transform: translateY(0);
  min-width: 200;
  width: 100%;
  height: 3928px;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  position: relative;
  top: 0px;
  left: 0px;
  overflow: hidden;
}

.introduction {
  width: 400px;
  height: 310px;
  background: url("../images/v4_22.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 181px;
  left: 59px;
  overflow: hidden;
}

.name_intro {
  width: 414px;
  color: rgba(0, 0, 0, 1);
  position: relative;
  top: 0px;
  left: 0px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Helvetica;
  font-weight: Bold;
  font-size: 64px;
  opacity: 1;
  text-align: left;
}

.student_intro {
  width: 414px;
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 254px;
  left: 0px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Helvetica;
  font-weight: Bold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
}

.aboutme {
  width: 100%;
  height: 50vh;
  background: url("../images/noneexistant.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 992px;
  left: 59px;
  overflow: hidden;
}

.aboutme_title {
  width: 414px;
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 0px;
  left: 0px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Helvetica;
  font-weight: Bold;
  font-size: 64px;
  opacity: 1;
  text-align: left;
}

.aboutme_statement {
  width: 100%;
  max-width: 85%;
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 117px;
  left: 0px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Helvetica;
  font-weight: bold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
  word-wrap: break-word;
  /* This line breaks the text when it overflows the container */
  /* Media query for screen sizes larger than mobile */
  @media (min-width: 768px) {
    max-width: 60%;
  }
}

.education {
  width: 621px;
  height: 213px;
  max-width: 85%;
  background: url("../images/v4_29.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 1708px;
  left: 59px;
  overflow: hidden;
  word-wrap: break-word;
}

.education_title {
  width: 414px;
  max-width: 85%;
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 0px;
  left: 0px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Helvetica;
  font-weight: Bold;
  font-size: 64px;
  opacity: 1;
  text-align: left;
  word-wrap: break-word;
}

.ada_grouped {
  width: 100px;
  height: 100px;
  max-width: 85%;
  background: url("../images/ada.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 113px;
  left: 0px;
  overflow: hidden;
  word-wrap: break-word;
}

.ada_name {
  width: 499px;
  max-width: 85%;
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 113px;
  left: 122px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Helvetica;
  font-weight: Bold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
  word-wrap: break-word;
}

.ada_year {
  width: 499px;
  color: rgba(0, 0, 0, 0.800000011920929);
  position: absolute;
  top: 170px;
  left: 122px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Helvetica;
  font-weight: Bold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
}

.skills {
  width: 621px;
  height: 613px;
  max-width: 85%;
  background: url("../images/v4_37.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 2422px;
  left: 59px;
  overflow: hidden;
  word-wrap: break-word;
}

.skills_title {
  width: 414px;
  max-width: 85%;
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 0px;
  left: 0px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Helvetica;
  font-weight: Bold;
  font-size: 64px;
  opacity: 1;
  text-align: left;
  word-wrap: break-word;
}

.htmlimage {
  width: 100px;
  height: 100px;
  max-width: 85%;
  background: url("../images/html.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 113px;
  left: 0px;
  overflow: hidden;
  word-wrap: break-word;
}

.html {
  width: 499px;
  max-width: 85%;
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 146px;
  left: 122px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Helvetica;
  font-weight: Bold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
  word-wrap: break-word;
}

.cssimage {
  width: 100px;
  height: 100px;
  max-width: 85%;
  background: url("../images/css.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 213px;
  left: 0px;
  overflow: hidden;
  word-wrap: break-word;
}

.css {
  width: 499px;
  max-width: 85%;
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 246px;
  left: 122px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Helvetica;
  font-weight: Bold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
  word-wrap: break-word;
}

.jsimage {
  width: 100px;
  height: 100px;
  max-width: 85%;
  background: url("../images/js.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 313px;
  left: 0px;
  overflow: hidden;
  word-wrap: break-word;
}

.js {
  width: 499px;
  max-width: 85%;
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 346px;
  left: 122px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Helvetica;
  font-weight: Bold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
  word-wrap: break-word;
}

.pyimage {
  width: 100px;
  height: 100px;
  max-width: 85%;
  background: url("../images/python.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 413px;
  left: 0px;
  overflow: hidden;
  word-wrap: break-word;
}

.py {
  width: 499px;
  max-width: 85%;
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 446px;
  left: 122px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Helvetica;
  font-weight: Bold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
  word-wrap: break-word;
}

.experience {
  width: 621px;
  height: 313px;
  max-width: 85%;
  background: url("../images/v4_45.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 3136px;
  left: 59px;
  overflow: hidden;
  word-wrap: break-word;
}

.experience_title {
  width: 414px;
  max-width: 95%;
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 0px;
  left: 0px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Helvetica;
  font-weight: Bold;
  font-size: 64px;
  opacity: 1;
  text-align: left;
  word-wrap: break-word;
}

.firstexpimage {
  width: 100px;
  height: 100px;
  max-width: 85%;
  background: url("../images/salesforce.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 113px;
  left: 0px;
  overflow: hidden;
  word-wrap: break-word;
}

.firstexp {
  width: 499px;
  max-width: 85%;
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 113px;
  left: 122px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Helvetica;
  font-weight: Bold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
  word-wrap: break-word;
}

.firstexpyear {
  width: 499px;
  color: rgba(0, 0, 0, 0.800000011920929);
  position: absolute;
  top: 170px;
  left: 122px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Helvetica;
  font-weight: Bold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
}

.secondexpimage {
  width: 100px;
  height: 100px;
  max-width: 85%;
  background: url("../images/bankofamerica.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 213px;
  left: 0px;
  overflow: hidden;
  word-wrap: break-word;
}

.secondexp {
  width: 499px;
  max-width: 85%;
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 213px;
  left: 122px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Helvetica;
  font-weight: Bold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
  word-wrap: break-word;
}

.secondexpyear {
  width: 499px;
  color: rgba(0, 0, 0, 0.800000011920929);
  position: absolute;
  top: 270px;
  left: 122px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Helvetica;
  font-weight: Bold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
}

.footer {
  width: 100%;
  height: 250px;
  background: url("../images/v4_21.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 3678px;
  left: 0px;
  overflow: hidden;
}

.gradient {
  width: 100%;
  height: 250px;
  background: linear-gradient(rgba(255, 255, 255, 1), rgba(217, 217, 217, 1));
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}

.footername {
  width: auto;
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Helvetica;
  font-weight: Bold;
  font-size: 24px;
  opacity: 1;
  text-align: center;
}

.footericons {
  position: absolute;
  top: calc(50% + 20px);
  /* Position the icons below the footername */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  width: 150px;
}

.x {
  order: 1;
  /* Display x icon first */
  width: 48px;
  height: 48px;
  opacity: 1;
  overflow: hidden;
}

.x:hover {
  transform: scale(1.2);
  transition-duration: 0.2s;
}

.instagram {
  order: 2;
  /* Display Instagram icon second */
  width: 48px;
  height: 48px;
  opacity: 1;
  overflow: hidden;
}

.instagram:hover {
  transform: scale(1.2);
  transition-duration: 0.2s;
}

.linkedin {
  order: 3;
  /* Display LinkedIn icon third */
  width: 48px;
  height: 48px;
  opacity: 1;
  overflow: hidden;
}

.linkedin:hover {
  transform: scale(1.2);
  transition-duration: 0.2s;
}
<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Helvetica&display=swap" rel="stylesheet" />
  <link href="./css/main.css" rel="stylesheet" />
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
  <title>Juliano Gouveia</title>
</head>

<body>
  <div class="fullpage section">
    <div class="introduction">
      <span class="name_intro">Hello! I'm Juliano Gouveia</span>
      <span class="student_intro">Student at Ada, The National College For Digital Skills</span>
    </div>
  </div>
  <div class="aboutme section">
    <span class="aboutme_title">About Me</span>
    <span class="aboutme_statement">I am a passionate student with a strong interest in Computer Science. I am studying the Extended Computer Science BTEC at Ada National College for Digital Skills. I am mostly interested in games development, software development, website development, cybersecurity and app development.</span>
  </div>
  <div class="education section">
    <span class="education_title">Education</span>
    <div class="ada_grouped"></div>
    <span class="ada_name">Ada, The National College For Digital Skills</span>
    <span class="ada_year">2023-2025</span>
  </div>
  <div class="skills section">
    <span class="skills_title">Skills</span>
    <div class="htmlimage"></div>
    <span class="html">HTML</span>
    <div class="cssimage"></div>
    <span class="css">CSS</span>
    <div class="jsimage"></div>
    <span class="js">JavaScript</span>
    <div class="pyimage"></div>
    <span class="py">Python</span>
  </div>
  <div class="experience section">
    <span class="experience_title">Experiences</span>
    <div class="firstexpimage"></div>
    <span class="firstexp">SalseForce</span>
    <span class="firstexpyear">2023</span>
    <div class="secondexpimage"></div>
    <span class="secondexp">Bank Of America</span>
    <span class="secondexpyear">2024</span>
  </div>
  <div class="footer section">
    <div class="gradient"></div>
    <div class="v4_8">
    </div>
    <span class="footername"><a href="mailto:[email protected]?subject=Enquiry" style="color: #000000;text-decoration:none;">Juliano Gouveia</a></span>
    <div class="footericons">
      <div class="linkedin">
        <a href="https://www.linkedin.com/in/juliano-gouveia-378223284/" class="social-button" id="linkedin-button">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 48 48">
                    <path fill="#0288D1" d="M42,37c0,2.762-2.238,5-5,5H11c-2.761,0-5-2.238-5-5V11c0-2.762,2.239-5,5-5h26c2.762,0,5,2.238,5,5V37z"></path>
                    <path fill="#FFF" d="M12 19H17V36H12zM14.485 17h-.028C12.965 17 12 15.888 12 14.499 12 13.08 12.995 12 14.514 12c1.521 0 2.458 1.08 2.486 2.499C17 15.887 16.035 17 14.485 17zM36 36h-5v-9.099c0-2.198-1.225-3.698-3.192-3.698-1.501 0-2.313 1.012-2.707 1.99C24.957 25.543 25 26.511 25 27v9h-5V19h5v2.616C25.721 20.5 26.85 19 29.738 19c3.578 0 6.261 2.25 6.261 7.274L36 36 36 36z"></path>
                  </svg>
        </a>
      </div>
      <div class="x">
        <a href="https://twitter.com/juliano_jg_" class="social-button" id="x-button">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0,0,256,256" style="fill:#000000;">
                <g fill="#000000" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M2.36719,3l7.0957,10.14063l-6.72266,7.85938h2.64063l5.26367,-6.16992l4.31641,6.16992h6.91016l-7.42187,-10.625l6.29102,-7.375h-2.59961l-4.86914,5.6875l-3.97266,-5.6875zM6.20703,5h2.04883l9.77734,14h-2.03125z"></path></g></g>
                </svg>
        </a>
      </div>
      <div class="instagram">
        <a href="https://www.instagram.com/juliano.jg_/" class="social-button" id="instagram-button">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
                      <radialGradient id="yOrnnhliCrdS2gy~4tD8ma_Xy10Jcu1L2Su_gr1" cx="19.38" cy="42.035" r="44.899" gradientUnits="userSpaceOnUse">
                          <stop offset="0" stop-color="#fd5"></stop>
                          <stop offset=".328" stop-color="#ff543f"></stop>
                          <stop offset=".348" stop-color="#fc5245"></stop>
                          <stop offset=".504" stop-color="#e64771"></stop>
                          <stop offset=".643" stop-color="#d53e91"></stop>
                          <stop offset=".761" stop-color="#cc39a4"></stop>
                          <stop offset=".841" stop-color="#c837ab"></stop>
                      </radialGradient>
                      <path fill="url(#yOrnnhliCrdS2gy~4tD8ma_Xy10Jcu1L2Su_gr1)" d="M34.017,41.99l-20,0.019c-4.4,0.004-8.003-3.592-8.008-7.992l-0.019-20    c-0.004-4.4,3.592-8.003,7.992-8.008l20-0.019c4.4-0.004,8.003,3.592,8.008,7.992l0.019,20 C42.014,38.383,38.417,41.986,34.017,41.99z"></path>
                      <radialGradient id="yOrnnhliCrdS2gy~4tD8mb_Xy10Jcu1L2Su_gr2" cx="11.786" cy="5.54" r="29.813" gradientTransform="matrix(1 0 0 .6663 0 1.849)" gradientUnits="userSpaceOnUse">
                          <stop offset="0" stop-color="#4168c9"></stop>
                          <stop offset=".999" stop-color="#4168c9" stop-opacity="0"></stop>
                      </radialGradient>
                      <path fill="url(#yOrnnhliCrdS2gy~4tD8mb_Xy10Jcu1L2Su_gr2)" d="M34.017,41.99l-20,0.019c-4.4,0.004-8.003-3.592-8.008-7.992l-0.019-20    c-0.004-4.4,3.592-8.003,7.992-8.008l20-0.019c4.4-0.004,8.003,3.592,8.008,7.992l0.019,20 C42.014,38.383,38.417,41.986,34.017,41.99z"></path>
                      <path fill="#fff" d="M24,31c-3.859,0-7-3.14-7-7s3.141-7,7-7s7,3.14,7,7S27.859,31,24,31z M24,19c-2.757,0-5,2.243-5,5   s2.243,5,5,5s5-2.243,5-5S26.757,19,24,19z"></path>
                      <circle cx="31.5" cy="16.5" r="1.5" fill="#fff"></circle>
                      <path fill="#fff" d="M30,37H18c-3.859,0-7-3.14-7-7V18c0-3.86,3.141-7,7-7h12c3.859,0,7,3.14,7,7v12 C37,33.86,33.859,37,30,37z M18,13c-2.757,0-5,2.243-5,5v12c0,2.757,2.243,5,5,5h12c2.757,0,5-2.243,5-5V18c0-2.757-2.243-5-5-5H18z"></path>
                  </svg>
        </a>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

我尝试查看有关堆栈溢出的不同帖子，甚至询问了 ChatGPT，但我没有找到任何答案。

html css mobile
1个回答
1
投票

将此添加到 

<head>
标签下。

<meta name="viewport" content="width=device-width, initial-scale=1" />

手机通常具有高分辨率，如果没有此标签，网站会显得很小。

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.