投资组合网站不适合较小的设备

【问题标题】：Portfolio website not fitting to smaller devices投资组合网站不适合较小的设备
【发布时间】：2022-01-23 17:49:23
【问题描述】：

为什么网站不适合较小的设备？ 还有一个水平滚动条。在设计视图中输入时，移动设备不会按照我想要的方式显示。我尝试调整所有内容的大小，但仍然无法正常工作。

它可能是某个地方的边距或填充吗？还是项目部分太大？还是与媒体查询有关？

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 110px auto 1fr 470px auto auto auto auto auto;
  gap: 0px 0px;
  grid-template-areas:
    "header header header header"
    "hero hero hero hero"
    "about about about about"
    "text text text text"
    "project1 project1 project1 project1"
    "project2 project2 project2 project2"
    "project3 project3 project3 project3"
    "project4 project4 project4 project4"
    "footer footer footer footer";
}

@media (max-width: 1200px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "header"
      "hero"
      "about"
      "text"
      "project1"
      "project2"
      "project3"
      "project4"
      "footer";
  }
}

@media only screen and (max-width: 1200px) {
  section.content-container {
    margin-left: 10px;
    margin-right: 10px;
  }
}

@media only screen and (max-width: 1200px) {
  footer.content-container {
    margin-left: 10px;
    margin-right: 10px;
  }
}

.header {
  grid-area: header;
}

.navbar {
  position: absolute;
  display: inline-block;
  top: 50px;
  right: 60px;
  font-family: 'Khula', sans-serif;
  line-height: 38px;
  font-weight: 400;
  font-size: 16px;
}

.nav-link {
  margin: 18px;
  color: #222222;
  text-decoration: none;
}

.name {
  position: absolute;
  display: inline-block;
  top: 50px;
  left: 60px;
  font-family: 'Kanit', sans-serif;
  line-height: 30px;
  font-weight: 500;
  font-size: 28px;
  color: #222222;
  text-decoration: none;
}


.hero {
  grid-area: hero;
  padding-top: 90px;
  padding-bottom: 250px;
  text-align: center;
}

.hero-h1 {
  font-family: 'Khula', sans-serif;
  font-weight: 600;
  font-size: 100px;
  color: #bbbbbb;
  line-height: 100px;
  letter-spacing: -1px;
}

.hero-h1-color {
  color: #222222;
}

.container {
  max-width: 1240px;
}

.about {
  grid-area: about;
  background-color: #f5f5f5;
  height: 700px;
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 38px;
}

.home-h2-text {
  font-family: 'Khula', sans-serif;
  letter-spacing: -1px;
  padding: 90px 100px 80px;
  font-size: 70px;
  color: #222222;
  line-height: 70px;
}

.home-h3-text {
  font-family: 'Khula', sans-serif;
  letter-spacing: -1px;
  font-size: 35px;
  color: #222222;
  padding: 90px 100px 80px;
  font-weight: 400;
}

.text {
  grid-area: text;
  height: 500px;
  margin-left: 100px;
  margin-right: 100px;
  font-family: 'Khula', sans-serif;
  letter-spacing: -1px;
  text-align: center;
  font-size: 40px;
  color: #bbbbbb;
  padding-top: 138px;
  line-height: 60px;
}

.text-h3-color {
  color: #222222;
}

.project1 {
  grid-area: project1;
  background-color: #fdf0f2;
  height: 700px;
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 38px;
}

.project2 {
  grid-area: project2;
  background-color: #f8f7ff;
  height: 700px;
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 38px;
}

.project3 {
  grid-area: project3;
  background-color: #fdf0f2;
  height: 700px;
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 38px;
}

.project4 {
  grid-area: project4;
  background-color: #eff5fd;
  height: 700px;
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 38px;
}

.footer {
  grid-area: footer;
  margin-top: 38px;
  margin-left: 100px;
  margin-right: 100px;
  height: 700px;
  margin-bottom: 100px;
}

.footer-text {
  padding: 200px 100px;
  font-family: 'Khula', sans-serif;
  font-weight: 600;
  font-size: 80px;
  color: #bbbbbb;
  line-height: 80px;
  letter-spacing: -1px;
}

.footer-contact {
  font-family: 'Khula', sans-serif;
  font-weight: 600;
  font-size: 35px;
  color: #222222;
  line-height: 50px;
  letter-spacing: -1px;
  text-decoration: none;
  padding-top: 0px;
  margin-left: 60px;
  margin-right: 60px;
}

.footer-text-color {
  color: #222222;
}

ul {
  list-style-type: none;
  text-decoration: none;
}
<div class="grid-container">

    <header class="header">
      <div><a href=index.html class="name">Web Developer</a></div>
      <nav class="navbar">
        <a href=about.html class="nav-link">About</a>
        <a href=projects.html class="nav-link">Projects</a>
        <a href=contact.html class="nav-link">Contact</a>
      </nav>
    </header>




    <div class="hero">

      <h1 class="hero-h1">ABC <br /><span class="hero-h1-color">front end developer</span></h1>




    </div>
    <section class="content-container about">

      <h2 class="home-h2-text">Nice to <br />meet you</h2>

      <h3 class="home-h3-text">About Me</h3>


    </section>

    <div class="content-container text">
      <h3>ABCDEFG <br /><span class="text-h3-color">ABCDEFG.</span></h3>
    </div>

    <section class="content-container project1">

      <h2 class="home-h2-text">Project 1</h2>

      <h3 class="home-h3-text">About Me</h3>

    </section>
    <section class="content-container project2">


      <h2 class="home-h2-text">Project 2</h2>

      <h3 class="home-h3-text">About Me</h3>

    </section>
    <section class="content-container project3">

      <h2 class="home-h2-text">Project 3</h2>

      <h3 class="home-h3-text">About Me</h3>


    </section>
    <section class="content-container project4">


      <h2 class="home-h2-text">Project 4</h2>

      <h3 class="home-h3-text">About Me</h3>

    </section>
    <footer class="content-container footer">

      <div class="footer-text">Let's <br> <span class="footer-text-color">Connect</span></div>

      <ul>

        <li><a href=about.html class="footer-contact">Email</a></li>
        <li><a href=projects.html class="footer-contact">LinkedIn</a></li>
        <li><a href=contact.html class="footer-contact">GitHub</a></li>
      </ul>



    </footer>
  </div>

【问题讨论】：

  • &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; 已经在你的脑海里了吗？
  • 根据页面当前的使用方式，您可以通过使用 flexbox 大大简化 css。您当前使用网格的方式（例如，请参阅grid-template-areas）并没有真正的帮助，并且出于某种原因您正在对标题标题使用绝对定位？别误会，grid 是个好东西，但你的网站根本不代表一个网格，它只是一个一维布局；一列行（display:flex 更适合）。您可以将标题本身设置为 flexbox，也可以包含 2 列（1 列用于标题，1 列用于导航）
  • @Kameron 我没有元名称视口标签，但包含它们并且它仍然相同。我想抑制移动视图上的水平滚动，但不知道怎么做？
  • @user8 查看已编辑的答案以防止水平滚动。

标签： html css


【解决方案1】：

您可以将代码嵌套在一个弹性容器中，这就是我所做的。例如，我称之为main-wrapper。然后，我为该类添加了一些 flex-box 样式并应用overflow: hidden; 使其不会滚动。然后我添加了一些示例媒体查询以在调整大小时对齐导航组件。它们在您的 CSS 底部标记为/* additions */，您可以随意更改，但这应该会让您走上正轨。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 110px auto 1fr 470px auto auto auto auto auto;
  gap: 0px 0px;
  grid-template-areas:
    "header header header header"
    "hero hero hero hero"
    "about about about about"
    "text text text text"
    "project1 project1 project1 project1"
    "project2 project2 project2 project2"
    "project3 project3 project3 project3"
    "project4 project4 project4 project4"
    "footer footer footer footer";
  justify-items: center;
}

@media (max-width: 1200px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "header"
      "hero"
      "about"
      "text"
      "project1"
      "project2"
      "project3"
      "project4"
      "footer";
  }
}

@media only screen and (max-width: 1200px) {
  section.content-container {
    margin-left: 10px;
    margin-right: 10px;
    width: 90vw;
  }
}

@media only screen and (max-width: 1200px) {
  footer.content-container {
    margin-left: 10px;
    margin-right: 10px;
  }
}

.header {
  grid-area: header;
}

.navbar {
  position: absolute;
  display: inline-block;
  top: 50px;
  right: 60px;
  font-family: 'Khula', sans-serif;
  line-height: 38px;
  font-weight: 400;
  font-size: 16px;
}

.nav-link {
  margin: 18px;
  color: #222222;
  text-decoration: none;
}

.name {
  position: absolute;
  display: inline-block;
  top: 50px;
  left: 60px;
  font-family: 'Kanit', sans-serif;
  line-height: 30px;
  font-weight: 500;
  font-size: 28px;
  color: #222222;
  text-decoration: none;
}


.hero {
  grid-area: hero;
  padding-top: 90px;
  padding-bottom: 250px;
  text-align: center;
}

.hero-h1 {
  font-family: 'Khula', sans-serif;
  font-weight: 600;
  font-size: 100px;
  color: #bbbbbb;
  line-height: 100px;
  letter-spacing: -1px;
}

.hero-h1-color {
  color: #222222;
}

.container {
  max-width: 1240px;
}

.about {
  grid-area: about;
  background-color: #f5f5f5;
  height: 700px;
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 38px;
  width: 80vw;
}

.home-h2-text {
  font-family: 'Khula', sans-serif;
  letter-spacing: -1px;
  padding: 90px 100px 80px;
  font-size: 70px;
  color: #222222;
  line-height: 70px;
}

.home-h3-text {
  font-family: 'Khula', sans-serif;
  letter-spacing: -1px;
  font-size: 35px;
  color: #222222;
  padding: 90px 100px 80px;
  font-weight: 400;
}

.text {
  grid-area: text;
  height: 500px;
  margin-left: 100px;
  margin-right: 100px;
  font-family: 'Khula', sans-serif;
  letter-spacing: -1px;
  text-align: center;
  font-size: 40px;
  color: #bbbbbb;
  padding-top: 138px;
  line-height: 60px;
}

.text-h3-color {
  color: #222222;
}

.project1 {
  grid-area: project1;
  background-color: #fdf0f2;
  height: 700px;
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 38px;
}

.project2 {
  grid-area: project2;
  background-color: #f8f7ff;
  height: 700px;
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 38px;
}

.project3 {
  grid-area: project3;
  background-color: #fdf0f2;
  height: 700px;
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 38px;
}

.project4 {
  grid-area: project4;
  background-color: #eff5fd;
  height: 700px;
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 38px;
}

.footer {
  grid-area: footer;
  margin-top: 38px;
  margin-left: 100px;
  margin-right: 100px;
  height: 700px;
  margin-bottom: 100px;
}

.footer-text {
  padding: 200px 100px;
  font-family: 'Khula', sans-serif;
  font-weight: 600;
  font-size: 80px;
  color: #bbbbbb;
  line-height: 80px;
  letter-spacing: -1px;
}

.footer-contact {
  font-family: 'Khula', sans-serif;
  font-weight: 600;
  font-size: 35px;
  color: #222222;
  line-height: 50px;
  letter-spacing: -1px;
  text-decoration: none;
  padding-top: 0px;
  margin-left: 60px;
  margin-right: 60px;
}

.footer-text-color {
  color: #222222;
}

ul {
  list-style-type: none;
  text-decoration: none;
}

/* additions */

.main-wrapper {
  display: flex;
  justify-content: center;
  overflow-x: hidden;
  max-width: 100%;
  height: 100%;
}

@media only screen and (max-width: 650px) {
  .logo > .name {
    position: absolute;
    top: 10px;
    left: 35%;
  }
  
  .logo {
    width: 100%;
  }
  
.navbar {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    right: 0;
  }
  
  .content-container .about {
    width: 100vw;
  }
  
  body {
    margin: 0;
  }
  
  h2 {
    white-space: nowrap;
  }
  
  .footer-text {
    align-items: center;
  }
}


.content-container {
  width: 80vw;
}
.footer-text {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
<div class="main-wrapper">
<div class="grid-container">

    <header class="header">
      <div class="logo"><a href=index.html class="name">Web Developer</a></div>
      <nav class="navbar">
        <a href=about.html class="nav-link">About</a>
        <a href=projects.html class="nav-link">Projects</a>
        <a href=contact.html class="nav-link">Contact</a>
      </nav>
    </header>




    <div class="hero">

      <h1 class="hero-h1">ABC <br /><span class="hero-h1-color">front end developer</span></h1>




    </div>
    <section class="content-container about">

      <h2 class="home-h2-text">Nice to <br />meet you</h2>

      <h3 class="home-h3-text">About Me</h3>


    </section>

    <div class="content-container text">
      <h3>ABCDEFG <br /><span class="text-h3-color">ABCDEFG.</span></h3>
    </div>

    <section class="content-container project1">

      <h2 class="home-h2-text">Project 1</h2>

      <h3 class="home-h3-text">About Me</h3>

    </section>
    <section class="content-container project2">


      <h2 class="home-h2-text">Project 2</h2>

      <h3 class="home-h3-text">About Me</h3>

    </section>
    <section class="content-container project3">

      <h2 class="home-h2-text">Project 3</h2>

      <h3 class="home-h3-text">About Me</h3>


    </section>
    <section class="content-container project4">


      <h2 class="home-h2-text">Project 4</h2>

      <h3 class="home-h3-text">About Me</h3>

    </section>
    <footer class="content-container footer">

      <div class="footer-text">Let's <br> <span class="footer-text-color">Connect</span></div>

      <ul>

        <li><a href=about.html class="footer-contact">Email</a></li>
        <li><a href=projects.html class="footer-contact">LinkedIn</a></li>
        <li><a href=contact.html class="footer-contact">GitHub</a></li>
      </ul>



    </footer>
  </div>
</div>

编辑： 防止带有初始滚动的水平滚动。我保留了我添加的main-wrapper div 以添加样式。您可以使用max-width: 100%; 和overflow-x: hidden; 来避免水平滚动。

EDIT 2 将width: 80vw; 设置为即将获得与以前相同的宽度。

【讨论】：

  • 抱歉，如果这是一个新手问题，但我如何使项目部分颜色框在桌面视图上保持原始大小。比以前小了很多？由于某种原因，桌面视图上有水平滚动。如何在移动和桌面视图上抑制水平滚动？
  • @user8 您没有与该类关联的宽度。您可以将.about 上的宽度设置为width: 80vw;。使用像 % 或 viewport 这样的动态宽度非常灵敏。
  • @user8 我认为.about 是每个彩色部分。事实证明，您还必须将 80vw 添加到 content-container
  • 我希望 about 部分与 project 部分相同。如果我的问题令人困惑，我们深表歉意。
  • 我认为您的第二次编辑更好，因为在移动视图上看起来不一样。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode