媒体查询、视口居中和倾斜边距答案

【问题标题】：Media Query, Centering the Viewport, and Skewed margins媒体查询、视口居中和倾斜边距
【发布时间】：2023-03-07 10:16:01
【问题描述】：

我试图让我的#titlesec 和#forms ID 在 500 像素或更少时占据 100% 的视口。问题是，它不仅没有这样做，而且实际上是有偏差的。如果您可以通过 chrome 开发人员工具检查它们，您将看到边距一直到视口的右侧。

这是我的 HTML...

  <h1 id="title">
      Customer Survey Form
    </h1> 
    <p id="description">Tell us what you think about our product</p>
    </div>

    <div id="forms">
    <form id="survey-form-1">
      <p id="name">Name: <input type="text" placeholder="Full Name"></p>
      <p id="number">Number: <input type="number"  placeholder="10 digits here""></p>
      <p id="email">Email: <input type="text" placeholder="put your email here"></p>
      <p id="email"  >Password: <input type="password" placeholder="password"></p>

    </form>
        <br>
        <p>
             <label>How would you describe yourself?</label>
          <br>
             <select id= "myList">
               <option value = "student">Student</option>
               <option value = "child">Child</option>
               <option value = "parent">Parent</option>

             </select>
          </p>
          <br>
        <form id="survey-form-2">
        <p> Q: How satisfied are you with our product?</p>
        <br>
        <input type="radio" name="satisfaction" value="Very Satisfied" checked> Very Satisfied </input>
        <br>
        <input type="radio" name="satisfaction" value="Satisfied" > Satisfied </input>
        <br>
        <input type="radio" name="satisfaction" value="Kinda Satisfied"> Kinda Satisfied </input>
        <br>
        <input type="radio" name="satisfaction" value="Not Satisfied"> Not Satisfied </input>
        <br>
        <br>

        <p> Q: What do you like about our product?</p>
         <input type="checkbox" name="likes" value="likes" checked> The product is reliable </input>
        <br>
        <input type="checkbox" name="likes" value="Satisfied" > The the kids love it </input>
        <br>
        <input type="checkbox" name="likes" value="Kinda Satisfied"> The product is fun </input>
        <br>
        <input type="checkbox" name="likes" value="Not Satisfied">The product is long lasting </input>

        </form>
        </div>

这是我的 CSS...

body {
background-color:#3385FF;  
}

#title-sec {
  display: flex;
  flex-direction: column;
  background-color: white;
  width:50%;
  height: 150px;
  position: relative;
  left: 25%;
  margin-top:-7px;
  margin-bottom: 10px;

}


h1 {
  text-align: center;
}

p {
  text-align: center;
}

#forms {
  display:flex;
  flex-direction:column;
  margin-top: 10px;
  background: white;
  width: 50%;
  position: relative;
  left: 25%;
}
#survey-form-1 {
  text-align: center;
  padding-top: 20px;
}

#survey-form-2 {
  text-align:center;
}

input {
  text-align: center;
}


@media only screen and (max-width: 500px) {

  #title-sec {

  display: flex;
  flex-direction: column;
   align-items: stretch;
  background-color: white;
  width:-75%;
  height: 150px;
  padding-bottom: 20px;
  margin-bottom: 20px;
margin-right: 131.25;

width:75%;    
}

  #forms {
  display:flex;
  flex-direction:column;
  margin-top: 10px;
  background-color: white;
  align-items: center; 
  width: 100%;  

  }
}

如果您需要更多信息，或者需要我澄清任何事情，请告诉我。

【问题讨论】：

标签： html css responsive-design media-queries viewport

【解决方案1】：

放在 CSS 文件的底部：

@media (max-width: 500px) {
  #titlesec {
    /*Put your argument with 100% Eg. width: 100%*/
  }
  #forms {
    /*Put your argument with 100% Eg. width: 100%*/
  }
}

对于倾斜的文本，试试这个：

#titlesec, #forms {  
   white-space: pre-wrap;      /* Webkit */    
   white-space: -moz-pre-wrap; /* Firefox */     
   white-space: -pre-wrap;     /* Opera <7 */    
   white-space: -o-pre-wrap;   /* Opera 7 */     
   word-wrap: break-word;      /* IE */ 
}

应该是这样的：

@media (max-width: 500px) {
      #titlesec, #forms {  
         white-space: pre-wrap;      /* Webkit */    
         white-space: -moz-pre-wrap; /* Firefox */     
         white-space: -pre-wrap;     /* Opera <7 */    
         white-space: -o-pre-wrap;   /* Opera 7 */     
         word-wrap: break-word;      /* IE */ 
      }

      #titlesec {
        /*Put your argument with 100% Eg. width: 100%*/
      }
      #forms {
        /*Put your argument with 100% Eg. width: 100%*/
      }
    }

希望对你有帮助；）

【讨论】：

不幸的是它没有。这件事太难了。可能是边距。
我一直在测试你的代码，我看不到错误，我试过是否有边距，如果宽度等。理论上文本本身应该适应宽度div，除非有一个元素不能做，这就是它导致错误的原因，这是我的结论，我很抱歉不能做更多，我希望这会有所帮助。

【解决方案2】：

我真的想通了。我从 #testsec 和 #forms ID 中删除了 position: relative 和 left:25% ，而是输入了 margin: auto。像魅力一样工作。希望这可以帮助其他在 CSS 中定位元素时遇到困难的人。

【讨论】：