レスポンシブ対応させる方法

画面幅が799px以下ならスマホ、800以上ならpcのスタイルを当てる方法

手順は以下

ブレイクポイントの記述

//app/assets/stylesheets/foundation/_variable.scss
// 幅の設定 -----------------------
$sp-breakpoint: 799px;

// ブレイクポイント -------------------
$breakpoints: (
  sp: "max-width:#{$sp-breakpoint}",
  pc: "min-width:#{$sp-breakpoint + 1px}",
);

ここでは$sp-breakpointという変数に799pxという値を入れ、

$breakpoints:というマップ(scssのデータ型)にsp(スマホ)の場合とpcの場合のブレークポイントを入れている。

つまり中身は、

// ブレイクポイント -------------------
$breakpoints: (
  sp: "max-width:799px",
  pc: "min-width:800px",
);

となる。

mixinの記述

//app/assets/stylesheets/foundation/_mixin.scss
@mixin sp {
  @media (map-get($breakpoints, 'sp')) {
    @content;
  }
}

@mixin pc {
  @media (map-get($breakpoints, 'pc')) {
    @content;
  }
}

先ほどのマップ$breakpoints:を取り出すためにmap-getという関数を使う。

第一引数$breakpointsというマップのキーである第二引数spと取り出している。

@media (max–width: 799px)

799px以下ではスマホ用cssを適用するためのメディアクエリとなる。

view port の記述

/ app/views/layouts/application.html.slim
doctype html
html
  head
    title
      | title
    / 以下を追記する↓
    meta[name="viewport" content="width=device-width,initial-scale=1.0"] 

    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
  body
    

viewportとは、表示領域のこと。Webページの横幅がviewportとなる。

viewportを設定していないPC向けのページをスマートフォンで表示すると、文字もページも小さくなってしまう。

詳しくは以下

viewportを理解して正しいレスポンシブデザインを設定しよう | デジタルマーケティング・Web制作・PR支援のBigmac inc

実際にcssを当てる

.hogehoge{
  width: 10rem;
  height: 10rem;
  background: red;

  @include sp {
    width: 5rem;
    height: 5rem;
  }

通常の場合は、width: 10rem;,height: 10rem;としたいけど、

spの場合はwidth: 5rem;,height: 5rem;という意味。

@include sp {}の部分が@contentの部分に挿入されることになる。

これを書けばsp、pcそれぞれにスタイルを当てることができる。

余談： レスポンシブをさせたい時にハマってしまったのが、

• view portの書き忘れ
• ブラウザの表示の倍率を変えていた

からだった。

自戒のためにこの記事を書きました。。。