0

レスポンシブ中の左/右マージンのブロックに関するCSSの質問があります。私はこのようなものが必要です:

@media screen and (max-width: 1024px) {
  body .wrapper {
    width:100%;
  }
}
@media (min-width: 1024px) and (max-width: 1170px) {
  body .wrapper {
    width:70%;
     margin: 0% 5% 0% 25%;
  }
}
@media (min-width: 1170) and (max-width: 1600px) {
  body .wrapper {
    width:65%;
    margin: 0% 10% 0% 30%;
  }
}

html:

<body>
  <div class="wrapper">text here</wrapper>
</body>

ウィンドウの幅を 1024px から変更すると、左マージン 25% でジャンプします。 1024px から、左余白がパーセンテージで滑らかに (ジャンプではなく) 増加し、1171px で、たとえば、1600px で 200px (左余白)、300px (たとえば) に達するようにする方法はありますか?自動マージンのように。 例えば、

@media screen and (min-width: 1024px) {
      body .wrapper {
        width:1024px;
        margin:0 auto;
      }
    }

window を増やすと、ラッパー ブロックが中央にあり、左右の余白が均等な余白でスムーズに増加します。同じものが必要ですが、左右のマージンが異なります。 これは可能ですか？よろしくお願いします。

4

1 に答える 1

0

このようなものを使用して、移行をスムーズにします...

transition: 0.5s ease-in-out 0.5s;
于 2016-10-21T15:49:49.943 に答える