Question

我正在尝试模拟个人/简历网站的设计，在调整页面大小之前，页面看起来也像我的预期，但是在调整大小以移动页面后，页面上的某些元素并未占据整个宽度屏幕（我在移动设备上使用的是一列）。

我在台式机上有2列布局，将其更改为用于带媒体查询的移动设备的单列布局，问题发生在媒体查询的断点之后。我在受影响的所有元素中都添加了“ width = 100％”，并尝试在chrome开发人员工具中分别打开和关闭每个样式规则（例如边距和填充）。几天后，我确定我只是想念所有的问题，或者有一个基本的误解。
Screenshot of mobie layout issue

我的HTML

<div class="wrapper">
    <div class="intro-box">
      <h1>Who am I, and where am I going?</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
    <div class="bio-box">
      <div class="photo-box">
        <h2>Thanks for discovering more about me</h2>
        <img src="davidSized.jpg" alt="David's Photo">
      </div>
    </div>
    <div class="content-wrapper">
      <h1>Learn about me here...</h1>
      <div class="selector-one selector">
        <h2>My Resume</h2>
      </div>
      <div class="selector-two selector">
        <h2>About Me</h2>
      </div>
      <div class="selector-three selector">
        <h2>More stuff</h2>
      </div>
      <div class="content">
        <p class="para-one"></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
    <div class="contact-info-box">
      <h3>Reach out to me here....</h3>
      <ul class="contact-info">
        <li>david_jhall@yahoo.com</li>
        <li><a href="#">LinkedIn Profile</a></li>
        <li><a href="#">Facebook Profile</a></li>
        <li>More ways to contact me....</li>
      </ul>
    </div>
  </div>

我的元标记

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

媒体查询之前的包装器元素

wrapper{
  display: grid;
  grid-template-columns: 30% auto;
  grid-template-rows: repeat(5 , auto);
  grid-gap: 15px;
}

媒体查询后的包装器元素

  .wrapper{
    grid-template-columns: auto;
    justify-content: center;
  }

不能覆盖移动设备上整个页面的元素（在mq之前）

.intro-box{
  grid-column: 1/3;
  margin: 0px;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1)),border-box,url("road.jpg") no-repeat center center;
  background-size: cover;
  color: lightgrey;
  min-height: 750px;
  max-width: 100%;
  padding: 0;
}
.bio-box{
  margin: 10px;
  border: 5px solid rgba(0, 0, 0, 0.25);
  text-align: center;
  border-radius: 10%;
  min-height: 500px;
}
.content-wrapper{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto 50%;
  text-align: center;
  min-height: 500px;
  grid-gap: 5px;
  max-width: 100%;
  justify-content: center;
}
.content{
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)),border-box;
  grid-column: 1/-1;
}

mq和其中的元素

@media screen and (max-width:700px){
  .wrapper{
    grid-template-columns: auto;
    justify-content: center;
  }
  .intro-box > h1{
    font-size: 3em;
    padding: 20px;
  }
  .bio-box{
    grid-row: 3/4;
    grid-column: 1/3;
  }
  .content-wrapper{
    margin: 0 auto;
    grid-column: 1/3;
    justify-self: center;
  }
  .content{
    padding: 20px;
    margin: 0 auto;
    margin-bottom: 50px;
    width: 100%;
  }
}

Answer 1

请记住，填充是列边框内部的元素，因此此处的区别不大。还请记住，类将成为您最好的朋友，只需在媒体查询中更改单个类的一些CSS，然后将此类添加到要为移动设备更改的每个列中。这样一来，您可以减少每个MQ占用的代码量。

首先，作为一种快速修复（但理想情况下不是永久性的），请尝试在MQ中添加以下CSS：

.your-div-class {
  width: 100%;
  right: 0;
}

此外，禁用（身体的）x溢出以避免任何讨厌的侧滚动条！

查看是否'右：0;的属性有助于将其完全移到右侧。

这就是我要做的：

为每列提供相同类别的“ response-col”或类似内容，然后将其弹出到MQ中，并像这样设置其样式：

@media screen and (max-width:700px){
    .responsive-col {
      margin: 0;
      right: 0;
      width: 100%;
      font-size: 22px;
      display: block;
    }
  }

有很多话要说，但这有望解决，如果您还有其他问题，我会回答。

基隆

元素未使用CSS网格填充手机上屏幕的整个宽度

1 个答案: