Help us understand the problem. What is going on with this article?

vwをremで直観的に数値化する簡単な方法

結論を先に書くと、以下でremを使用しvwを感覚的に扱えるようになります。

   html{font-size: calc( 1000vw / カンプサイズ );}

remをvwに直結させる

750pxのデザインカンプを渡された場合で説明します。
2倍のレティ-ナ想定で、375pxの画面でコーディングします。この時、カンプの半分の大きさで、ぴったりになるように、サイズを調整すると思います。

レスポンシブの場合、単位は、remかvwかvminが多いと思います。ここで数値をカンプのママからはとらずに、換算もしくは、sassなど自動計算していたと思います。それが、計算不要となります。カンプサイズが375pxを想定していた場合の例です。

html{font-size: calc( 1000vw / 375 );}

カンプサイズが375pxの(100vw)ものを作成するときに、100vwを同じ大きさの375で割ると答えは1です。1pxが1remになります。10倍の1000vwだと、10pxが1remになります。

カンプサイズが320pxを想定していた場合の例では

html{font-size: calc( 1000vw / 320 );}

カンプサイズが320pxの(100vw)ものを作成するときに、100vwを同じ大きさの320で割ると答えは1です。1pxが1remになります。しかし、chromeでは10pxが文字の最小サイズとなっているため、1pxをfont-sizeとはできません。そこで10倍の1000vwをルートサイズをfontサイズとすると、10px=1remになります。

1rem=10pxにするために、62.5%としていたことを、vwと関係から、1000vwをデザインカンプの基準となる大きさで割ることで1remがカンプでの10pxになることを狙っています。

「html{font-size: calc( 1000vw / カンプサイズ );}」を入れることで、デザインカンプの実現にrem単位を使うことで、スマホ各種サイズに応じた拡縮を行えます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html{
      font-size: calc( 1000vw / 375 );/*カンプでの1rem=10px相当 お好みで*/
    }
  </style>
</head>
<body>
<p style="width:50vw;background: #fee">50vw</p>
<p style="width:18.75rem;background: #eef">18.75rem(375÷2)</p>
<p style="width:100vw;background: #fee">100vw</p>
<p style="width:37.5rem;background: #eef">37.5rem</p>
</body>
</html>

このやり方は、vwを元にrem換算しているので、デザインカンプから直感的に数値を挿入することができます。
sassでごにょごにょしたり、換算表やツールが不要になります。

画面サイズがカンプより小さければ、小さい比率に合わせてremの基準が変化します。font-size以外にも、あらゆるサイズに使えば、楽に閲覧者の画面サイズに対応することが可能となります。
可変して欲しくないサイズは、pxで記述しましょう。

想定外に大きくさせない

大きい画面ではそれ以上に大きくなってほしくない場合があります。
そんな時のスポンシブ対応は、デザインカンプ以下のスクリーンサイズでいい場合には、メディアクエリを使いましょう。
【例:375pxのカンプ以下のみ割合に応じて縮小に】

html{
      font-size: 62.5%;
    }
@media screen and(max-width:375px) {
  html {
    font-size: calc( 1000vw / 375 );
  }
}

で対応。そうすることで、375pxの画面以上の場合には、カンプと同じ大きさで。画面サイズ320pxで見られた時には、100vw=320pxとなり、320/375=85.333…%で縮小表示されることになります。

これは、単位を必要とするすべての値にremを使用することで、画像を拡縮するかのようにすべての要素が拡縮されるようになります。

kazu-1
インハウスでコード書いています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした