Section

Inner

.section 直下に配置する .inner には画面幅に応じてレスポンシブな固定幅が設定されます。

.section
.inner {
  width: 540px, 720px, 960px, 1140px;
  padding: 0 16px;
}
<div class="section">
  <div class="inner">
    ...
  </div>
</div>

Inner Soft

.inner-soft を使うと固定幅が無くなります。

.section
.inner-soft {
  padding: 0 1em;
}
<div class="section">
  <div class="inner-soft">
    ...
  </div>
</div>

Inner VW

.inner-vw を使うと Fablet 以上のサイズで幅が割合算出されます。

.section
.inner-vw {
  width: 90vw;
  padding: 0 1em;
}
<div class="section">
  <div class="inner-vw">
    ...
  </div>
</div>
Last Updated: 2018-11-6 01:24:05