デザインデータをコーディングする際のpxとブラウザ幅について

現在独学でweb制作をしているものです。

デザインデータからコーディングする際に、デザインデータそのままのpxでコーディングすると
指定のブラウザ幅以外の時にレイアウトが崩れると思うのですが、
それに関しては実際の会社様、またフロントエンド、コーダーの皆様方はどのように対処しているのでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

「レスポンシブ CSS」などで検索すると実装方法は調べることができると思います。

まず[1]で、デザインデータを再現します。
「デザインデータそのままのpxでコーディング」するのは[1]です。

画面幅を狭めていったときの記述を[2]と[3]に書きます。
このとき[2]と[3]については、
デザインデータがない場合はコーディングする人の裁量で実装する場合もあります。
どのような契約になっているかによって変わります。

CSS
1/* [1] デザインデータでの指定 */
2h1 {
3  font-size: 32px;
4  width: 700px; /* 「768px」を上回らないようにする */
5  color: red;
6}
7
8@media only screen and (max-width: 768px) {
9  /* [2] 画面幅768px以下のときの記述 */
10  h1 {
11    font-size: 24px;
12    width: auto;
13  }
14}
15@media only screen and (max-width: 480px) {
16  /* [3] 画面幅480px以下のときの記述 */
17  h1 {
18    font-size: 18px;
19  }
20}