使用 css 和 html 的响应式设计答案

【问题标题】：Responsive design with css and html使用 css 和 html 的响应式设计
【发布时间】：2017-03-08 04:03:45
【问题描述】：

我正在为桌面和移动设备构建响应式表单设计。我为此编写了以下代码，它工作正常，但是当我调整窗口大小（如移动屏幕宽度）左右边距空间不大时，它会产生问题。我想尽量减少左右边距的空间我尝试了很多但失败了有人可以帮助我吗

.main_container {
  position: relative;
  width: 100%;
  border-top: 2px solid #e4e4e4;
  border-bottom: 2px solid #e4e4e4;
  overflow: hidden;
}

.main_container:after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 100px 0 100px;
  border-color: #007bff transparent transparent transparent;
}

.left_parent {
  float: left;
}

.left_child {
  padding-right: 2%;
  padding-left: 0%;
  text-align: center;
}

.right_child {
  padding-right: 0%;
  padding-left: 0%;
  text-align: center;
  /*width: 40%;*/
}

.right_parent {
  float: left;
}

.left_uppper_text {
  font-family: 'Open Sans', sans-serif;
  font-size: 130%;
  text-align: justify;
  margin-right: 3%;
  color: #847979;
}

.left_bottom_text {
  font-family: 'Open Sans', sans-serif;
  font-size: 81%;
  color: #bbb;
  font-weight: bold;
}

.main_child {
  margin: auto;
  padding: 0% 0% 0% 27%;
  overflow: hidden;
  margin: auto;
  width: 50%;
  /* border: 3px solid green; */
  padding: 10px;
}

.input_email {
  width: 67%;
  padding: 3% 17px;
  box-sizing: border-box;
  margin: 8px 0;
}

.input_button {
  max-width: 190px;
  min-width: 84px;
  padding: 3% 20px;
  box-sizing: border-box;
  margin: 8px 0;
  background-color: rgba(245, 0, 83, 0.73);
  color: white;
  border: none;
  border-top: 2px solid rgba(245, 0, 83, 0.73);
  border-bottom: 2px solid rgba(245, 0, 83, 0.73);
}

<div class="main_container">

  <div class="main_child">

    <div class="left_parent">

      <div class="left_child">
        <span class="left_uppper_text"> Join over 20,2000 blog subscriber </span> <br>
        <span class="left_bottom_text"> We guarantee 100% customer satisfaction</span>
      </div>

    </div>

    <div class="right_parent">

      <div class="right_child">
        <input type="text" class="input_email">
        <button class="input_button">Subscribe</button>
      </div>

    </div>

  </div>
</div>

【问题讨论】：

已转换为 sn-p，您能更好地解释您要达到的目标吗？
添加媒体查询以获取您想要减少边距的屏幕尺寸。当屏幕为该尺寸（或更小）时，边距会发生变化。为此，只需在底部声明您的媒体查询，然后重新定义元素的边距。
感谢@Falk，但对媒体查询一无所知，您能帮帮我吗？
当然。你可以在这里阅读语法和概念：w3schools.com/cssref/css3_pr_mediaquery.asp 至于你想要做什么：@media screen and (max-width: 480px) { //用你想要的替换 480 px。 .element { 边距： } }
或者看下面的答案

标签： css html responsive-design

【解决方案1】：

因此，您可以使用@media 查询以任何屏幕尺寸操作样式。在您的情况下，它可能看起来像这样：

@media (max-width: 768px /* Mobile size */) {
   /* Element you want to style at this screen size */
   .element {
      margin: 5px; /* Or whatever style you want */
   }
}

您可以在此处阅读有关@media 查询的更多信息：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

【讨论】：

没问题！祝你的项目好运。