メディアクエリなしで適応レイアウトを構築する

Sep 12, 2025

操作方法

長い間、私はWebページ上の完璧な視覚的な構成に到達しようとしていました。私は私の毎日の仕事でCSSブレークポイントでたくさんの痛みを持っていました、そして、応答的なレイアウトを処理する一般的な方法にはかなり満足していました。最近、私は非常にクールだった レスポンシブウェブデザイン すべてをシンプルで一貫して論理的にするためのトリック、そして私はあなたとそれを共有しようとしています。

この記事は主に創造的な開発についてです。 CSS、ブレークポイント、およびメディアクエリについてすでに知っていると思います。

グリッドとFlexBoxでブログを作成します

伝統的な方法

Adaptive layouts: breakpoints — ブレークポイントは、非標準のビューポートの不満足な結果につながる可能性があります。

携帯機器が世界を引き継いています。さまざまな種類のデバイスがWebサイトを作成する方法を変更しています。「応答的なウェブサイト」というほとんどの人がデスクトップとモバイルバージョンだけを想定しています（時にはデスクトップ、タブレット、モバイル）。これが伝統的に働く方法です。

 H1 {
フォントサイズ：80px;
}
。コンテナー{
幅：980px;
マージン：0自動車;
}

@media（最大幅：1023px）{
H1 {
フォントサイズ：48px;
}
。コンテナー{
幅：自動;
パディング：0 30px;
}
}

実際、通常は ウェブサイトのレイアウト 私達は私達の装置のためには見えない。たとえば、

のフォントサイズを調整する方法を見てみましょう。題名：

Adaptive layouts — ただ1つのブレークポイントであなたは奇妙な地点サイズで終わることができます

あなたが見て、私たちの<; h1＆gt;タイトルは、320pxと800pxの幅デバイスの "font-size：48px"、1024pxと2560pxの "font-size：80px"です。

もちろん、より多くのブレークポイントを追加することができますが、さまざまなデバイスの数は無数です。これは、どの画面にどのような値を適用するかを知るのは難しいので、これはデザイン仕様を非常に複雑で混乱させるつもりです。

Adaptive layouts: font size — あなたはすべての画面でフォントサイズを完璧にするために十分なブレークポイントを作成することはできません

私たちが本当に必要なのはこれです。

ビューポートユニット

Adaptive layouts: viewpoint units — ビューポートユニットは問題を改善しますが、まだ仕事が必要です

この問題に対する解決策は、ビューポート単位VWとVHを含みます。これらは、ビューポートの幅/高さの1/100を表す長さ単位（IE9 +からのブラウザによって広くサポートされています）です。

このサイズに応じてWebページのプロパティを調整するためにこれらを使用できます。状況はもう少し良くなるでしょうが、痛みはまだ同じです：

 H1 {
フォントサイズ：Calc（（80/1920）* 100VW;
}
。コンテナー{
幅：80VW;
マージン：0自動車;
}

@media（最大幅：1023px）{
H1 {
フォントサイズ：Calc（（48/375）* 100VW;
}
。コンテナー{
幅：90VW;
}

大きすぎるか小さすぎるかどうかわからない。

どのようにして真の適応型レイアウトシステムを構築できますか？ 320pxから2560pxにネイティブに働く応答ウェブサイトを設計する方法

理想的には、あなたのモックアップはレイアウトの背後にある論理、そしてそれがより小さな解像度から大きく適応する方法を説明するべきです：

ソリューション

Adaptive layouts: solution — これが真に適応的なレイアウトシステムを作る方法です

小さな画面から大きなものまでのプロパティを継続的に調整したいです。ブレークポイントとメディアクエリはありません。私たちが望むものは、すべてのディスプレイに対して機能する単一の値です。

2つの変数を持つ数学関数がキーです。たとえば、タイトルのフォントサイズを調整したい場合は、この関数は次のようになります。

1920x + Y = 80
375x + Y = 48

1920 - デザインモックアップのデフォルトのデスクトップ幅（100VWに等しい）
375 - デザインモックアップのデフォルトの移動幅（100VWに等しい）
80 - デスクトップ上の希望のH1タイトルフォントサイズ
48 - 監視時の希望のH1タイトルフォントサイズ

これらはx値とyの値です。

X =（80 - 48）/（1920 - 375）
x = 0.0207

Y = 80 - 1920 * 0.0207
y = 40.256

これらの値を使用するには、Webページ（IE9 +からのブラウザで広くサポートされている）で計算を実行するためのCalc CSS関数が必要です。 X * 100回を数える必要があります（1VW unit = 1/100のビューポート幅の1/100）。

元の機能を取ります：
1920x + Y = 80
375x + Y = 48

1920を100VWに置き換えます。
100VW * X + Y =望ましい値

xとyを値に置き換えます。
100VW * 0.0207 + 40.256 =希望値

最後のCSSスタイルを取得します。

 H1 {フォントサイズ：Calc（2.07VW + 40.25px）}

驚くべきことに十分に、ついに私たちが望んでいる方法だけ働きます！

すべてのディスプレイの1つのプロパティだけです。値をもう一度上書きする必要はありません。幅、フォントサイズ、パディング、マージンなどの種類のプロパティを調整して計算できます。

このテクニックを使用して実際のレイアウトを作成しようとしましょう。

しかし、このアプローチには1つの欠点があります。このCalc関数の背後にある値を理解するのは難しいです。どのように私たちはそれを単純化することができますか？

毎日HTMLをコーディングしている場合は、おそらくSASS / SCSSプリプロセッサに精通しています。これがあなたのためのちょっとしたヘルプです： "ミキシン"を作りましょう、そしてこれらすべての計算が自動的に起こり、そしてまだ私達の元の値を保持します。

上記と同じ機能ですが、Sass Mixinとして作られています。

 $ディスプレイ全体：1920年
$ DISPLAY-LANGE：375

@ミキシン流体（$プロパティ、$ MinValue、$ MaxValue）
  $ X：（$ MAXVALUE  -  $ MINVALUE）/（$ DISPLAY-WIDE  -  $ DISPLAIN-LANGE）
  $ Y：$ MAXVALUE  -  $ DISPLAY全体* $ X
  ＃{$プロパティ}：Calc（＃{100 * $ x} VW +＃{$ Y} PX）

h1.
  @ include流体（ 'フォントサイズ'、48,80）

。コンテナ
  @ include流体（「幅」、315,1580）
@ include流体（ 'パディング'、30,60）

Adaptive layouts: mixin — Sass Mixinはプロセス全体を簡単にすることができます

この技術最後に真に応答的なWebレイアウトを構築するための非常に洗練された解決策を提供します。ほとんどのブラウザをサポートし、プロジェクトを訪問者に正しく表示するように保護し、スタイルの構造を簡素化し、最も重要なことにWebレイアウトを一貫して論理的にします。私はそれがあなたがいくつかの驚くべきウェブプロジェクトを起動するのを助けることができることを願っています。

関連記事：

17本当に有用なレスポンシブWebデザインチュートリアル
応答Webタイポグラフィの規則
CSSグリッドで応答レイアウトを作成します

メディアクエリなしで適応レイアウトを構築する

伝統的な方法

のフォントサイズを調整する方法を見てみましょう。題名：

ビューポートユニット

ソリューション

操作方法 - 最も人気のある記事

あなた自身のスタイラスをわずか4世帯で（真剣に）してください

17 tips for drawing manga faces

ライオンを描く方法

マイナススペースを使ってより良い手を描く

アフィニティ設計者：輸出ペルソナの使い方

ベクターツールを使用する：Webデザイナーのアプローチ

表現上の手を塗るための上のヒント

Adobe XDでプロトタイピングを始めましょう

カテゴリ