質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

margin,paddingをremに指定し、メディアクエリで切り替えた時の動きついて

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,483

Chischoco

score 10

前提・実現したいこと

PC用のレイアウトのコーディングを先に行っており、メディアクエリを利用してある画面幅になった時にスマホ用のレイアウトに切り替わるようにしています。PC用のレイアウトのhtmlタグに"font-size: 62.5%;"を記述し、"1rem=10px"になるようにしています。またmargin,paddingも同じくremで指定しています。
問題はスマホ用のレイアウトに切り替わる時です。
スマホ用ではPC用より文字サイズとmargin,paddingを小さくしたいと思っているので、スマホ用スタイルシートのhtmlタグに”font-size:55.6%;”を記述しました。私の認識ではこのように記述することで、スマホ用スタイルシートで再び小さいサイズを記述しなくても、先ほどPC用でremを指定した部分(文字サイズとmargin,padding)に”55.6%”が適用され、勝手にサイズが小さくなると考えていました。
しかし結果としては、文字サイズは希望通り小さくなりましたがmargin,paddingはPC用で指定したサイズのまま変わりませんでした。

この認識が間違っているのか、調べてもよくわからなかったので質問させて頂きました。よろしくお願いいたします。

該当のソースコード

全て記載すると長くなってしまうので、一部を抜粋しています。

PC用スタイルシート

*{
  box-sizing: border-box;
  line-height: 1.5;
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

html{
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body{
  background-color: #fafafa;
  color: #050505;
  font-family: sans-serif;
  font-size: 1.8rem;
}

/*----------------------------------
共通のスタイル
----------------------------------*/
.sp{
  display: none;
}

.pc{
  display: block;
}

.flex{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.align-items{
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.justify-content{
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/*----------------------------------
ヘッダー
----------------------------------*/

header{
  background-color: rgba(250, 250, 250, 0.9);
  color: #050505;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.btn_menu{
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.btn_menu .box_logo{
  margin-left: 2rem; /*20px*/
}

 .logo_img{
  vertical-align: bottom; /*画像下の余白を埋める*/
  width: 100%;
  height: auto;
}

.menu_space{
  padding: 1.5rem 0; /*15px 0*/ /*0.8% 0*/
  margin-right: 2rem; /*20px*/ /*1%*/
  width: 20.8%; /*400px*/
  min-width: 300px;
}

.menu_space ul{
  width: 90%; /*360px*/
  min-width: 260px;
}

.menu_space ul li{
width: 44.4%; /*160px*/ /*44.4%*/
min-width: 110px;
margin: 0 1rem; /*10px*/ /*0 2.3%*/
}

.btn_link{
  display: inline-block;
  background-color: #00bbff;
  border-radius: 5px;
  box-shadow: 2px 2px #000064;
  color: #050505;
  padding: 1.15rem 0; /*11.5px*/ /*7.2% 0*/
  text-align: center;
  width: 100%;
}

.btn_link:hover{
  background-color: #4ccfff;
  box-shadow: none;
  color: #525252;
  position: relative;
  top: 4%; /*2px*/
  left: 0.6%; /*2px*/
}

/*-------------------------------------
ハンバーガーメニュー
-------------------------------------*/
#nav-open {
  display: inline-block;
  width: 3rem; /*30px*/
  padding-bottom: 2.8rem; /*28px*/
  vertical-align: middle;
  margin-left: 1rem; /*10px*/
  z-index: 4;
  cursor: pointer;
}

/*ハンバーガーアイコンをCSSで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  transition: all 0.4s;
  padding-bottom: 0.4rem; /*線の太さ*/ /*4px*/
  width: 3rem;/*長さ*/ /*30px*/
  border-radius: 3px;
  background: #050505;
  display: block;
  content: '';
  cursor: pointer;
  z-index: 5;/*最前面*/
}

#nav-open span:before {
  top: 300%; /*12px*/
}

#nav-open span:after {
  top: 600%; /*24px*/
}

/*クリック時に三本線を動かす*/
#nav-open.active span {
  -webkit-transform: translateY(300%) rotate(-45deg); /*12px*/
  transform: translateY(300%) rotate(-45deg);
}

#nav-open.active span:before {
  -webkit-transform: translateY(-600%) rotate(45deg);/*打ち消す* /*-24px*/
  transform: translateY(-600%) rotate(45deg);/*打ち消す*/
  opacity: 0;
}

#nav-open.active span:after {
  -webkit-transform: translateY(-600%) rotate(90deg); /*-24px*/
  transform: translateY(-600%) rotate(90deg);
}

/*中身*/
#nav-content{
  background-color: #00bbff;
  color: #050505;
  width: 32.6rem;/*最大幅*/ /*326px*/
  overflow: auto;
  padding: 0 2rem; /*20px*/
  position: fixed;
  top: 0;
  right: -32.6rem; /*-32.6rem*/
  -webkit-transition: .3s ease-in-out;/*滑らかに表示*/
  transition: .3s ease-in-out;
}

#nav-content.open {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 3;/*最前面に*/
}

.hamburger-top {
  padding: 2rem 0; /*20px*/
}

#nav-content .menu_ttl{
  border-bottom: 1px solid #050505;
  font-size: 2.4rem;
  margin-bottom: 2rem; /*20px*/
  }

.link li{
  text-indent: -1em;
  position: relative;
  left: 1em;
}

.link li:not(:last-of-type){
  display: block;
  margin: 2rem 0; /*20px 0*/
}

.link li:last-of-type{
  margin-bottom: 4.15rem; /*41.5px*/
}

.link a{
  background-color: #00bbff;
  color: #050505;
}

.link li::before{
  font-family: "Font Awesome 5 Free";
  content: "\f0da";
  font-weight: 900;
  margin-right: 1rem; /*10px*/
}

#nav-content a:hover{
  background-color: #00bbff;
  color: #f0f0f0;
}

/*閉じる用の薄黒カバー*/
#nav-bg {
background-color: #9f9f9f;
color: #050505;
display: none;/*はじめは隠しておく*/
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;/*全体に広がるように*/
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
width: 100%;
z-index: 2;
}

#nav-bg.show{
  display: block;
  opacity: 0.5;
}
}

スマホ用スタイルシート

@media (max-width: 375px){

  *{
    line-height: 1.7;
  }

  html{
    font-size: 55.6%;
  }

  /*----------------------------------
  共通のスタイル
  ----------------------------------*/

  .sp{
    display: block;
  }

  .pc{
    display: none;
  }

  .point_mainttl, .casualclass_ttl, .qa_ttl, .guide_ttl{
    font-size: 2.444rem;
    width:90%;
  }

  .point_ttl, .casualclass_ttl, .qa_ttl, .guide_ttl{
    width: 90%;
    margin:0 auto 40px auto;
  }
  /*----------------------------------
  ヘッダー
  ----------------------------------*/

  header{
    position: fixed;
  }

  .btn_menu{
    justify-content: flex-start;
  }

  .btn_menu .box_logo{
    /* margin-left: 10px; */

  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/05/23 14:25

    検証・再現可能なコードを質問本文にご提示ください。

    キャンセル

  • Chischoco

    2019/05/23 15:07

    mts10806さん、ご回答ありがとうございます。
    申し訳ございません、分かりくかったですね。
    コード追加いたしました。よろしくお願いいたします。

    キャンセル

  • x_x

    2019/05/23 15:20

    ブラウザと、最小フォントサイズ設定はどうなっているでしょうか?

    キャンセル

回答 2

checkベストアンサー

0

スマホは、デバイスによって、100%時のフォントの大きさが違う
からです。なぜなら、デバイスによって、画面の実寸も違えば、解像度(ppi)も違うからです。
よって、100%がどのデバイスも16pxだったとしても、その16pxが、デバイスによって見え方(見かけの大きさ)が違います。
ちなみに、PCは、何もしていなければ、100% = 16pxになります。

なので、デバイスが変わっても、画面サイズに対してだいたい同じ見え方の比率にするためには、
vwを使うのが一番妥当かと思います。
(画面横幅の大きさに対して何%の比率かという大きさを指定できる単位)
なので、iPhone 7を基準に、
画面の幅に対して、だいたい14pxっぽく表示したいって時は、
14 / 350(iPhone 7の横幅の論理ピクセル値) * 100で比率をとり、

html {
  font-size: 4vw;
}


とします。
10pxっぽくしたいのなら、10 / 350 * 100の数値を入れます。
iPhone 7以外のデバイスを基準にしたければ、
他のデバイスの論理ピクセル値を調べ、350のところにその数値を入れて計算します。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

PCとスマホで文字サイズを、remで固定するのであれば、単に各htmlに「px」で任意数値をリセットするだけで良いのでは?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る