如何将边距设置为响应式 div？答案

【问题标题】：How can i set margin to responsive div?如何将边距设置为响应式 div？
【发布时间】：2017-02-23 07:20:35
【问题描述】：

我是css 的新手，为此目的编写此代码：
JSFIDDLE HERE!
想要在分辨率1024:

中实现这一点

screen: 1,024px
margins-left-right: 50px
columns: 58px
gutter: 12px

在我的代码中无法为屏幕左右设置50px 边距，我该如何解决这个问题？谢谢大家。
更多解释 div col-1 左侧边距 col-3 menu 和屏幕右侧边距。

【问题讨论】：

标签： jquery html css responsive-design

【解决方案1】：

您可以使用media query为不同的屏幕尺寸设置不同的css规则。请参考以下链接。

【讨论】：

【解决方案2】：

这类事情有很多资源，例如，请参阅w3schools

.mystyle {
    margin: 0px 50px 0px 50px
}

或

.mystyle {
    margin-left: 50px,
    margin-right: 50px
}

【讨论】：

【解决方案3】：

在父/包装容器中添加您的div 并为容器提供边距。

我建议你通过CSS Box model article at MDN。

参考代码：

$(document).ready(function() {

  var screenSize = screen.width;
  //alert('type='+jQuery.type(screenSize));
  if (screenSize == 1024) {
    $(".col-1").css("width", "58px");
    alert('width success!');

    $(".col-1").css("margin", "12px;");
    alert('margin success!');



  }

});

* {
  box-sizing: border-box;
}

.parent {
  margin: 0 50px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

.col-1 {
  width: 58px;
  background-color: chocolate;
  margin: 12px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

body {
  background-color: darkgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="header">
    <h1>Chania</h1>
  </div>

  <div class="row">

    <div class="col-3 menu">
      <ul>
        <li>The Flight</li>
        <li>The City</li>
        <li>The Island</li>
        <li>The Food</li>
      </ul>
    </div>

    <div class="col-1">
      <img src="https://assets.bwbx.io/images/users/iqjWHBFdfxIU/i7T6Dp0ts0sQ/v1/-1x-1.jpg" />
    </div>
    <div class="col-1">B</div>
    <div class="col-1">C</div>
    <div class="col-1">D</div>
    <div class="col-1">E</div>
    <div class="col-1">F</div>
    <div class="col-1">G</div>
    <div class="col-1">H</div>
    <div class="col-1">I</div>
    <div class="col-1">J</div>
    <div class="col-1">K</div>
    <div class="col-1">L</div>

  </div>
</div>

【讨论】：

【解决方案4】：

如果你想在所有四个边上自定义边距，它会顺时针工作，即上、右、下、左

 .custommargin{ margin: 0px 0px 0px 0px }

如果你想给上、下边和左右边相同的边距，左边

.custommargin{ margin: 0px 0px }

如果所有 4 个边的边距相同

.custommargin{ margin: 0px}

【讨论】：

【解决方案5】：

不要使用$(document).ready(function(){})，而是使用$(window).resize(function(){})，这样每次调整屏幕大小时，函数都会再次加载。

例子：

$(window).on('resize', function(){
      var win = $(this); //this = window
      if (win.width() == 1024) { /* ... */ }
});

参考：jQuery on window resize

【讨论】：