【プロフィールページ改修第7回】Responsive対応 - スマレジエンジニアyushiのブログ

引き続き、プロフィールページを作成していきます。

yushi-dev.hatenablog.com

技術スタックは下記の通りです。

nuxt.js
SCSS
Tailwind CSS

今回はResponsive対応を行います。

media query

各sectionを.app-containerというクラスで囲います。

<section class="app-container>
  <h2>ABOUT</h2>
  <div>...</div>
</section>

.app-containerのstyleを実装します。

$mobile-max-width: 768px;
$tablet-max-width: 1024px;

.app-container {
  width: $tablet-max-width;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  @media (max-width: $tablet-max-width) {
    width: $mobile-max-width;
  }
  @media (max-width: $mobile-max-width) {
    width: 100%;
  }
}