メディアクエリを使用しない応答性の高いレイアウト

Web レイアウトを構築するときにメディア クエリをどのくらいの頻度で使用しますか?時間を費やしすぎました!

まず、デザインとまったく同じレイアウトを作成するのにかなりの時間を費やしました。ただし、ページがすべての解像度で適切に表示されるようにするには、ブラウザのサイズを可能なすべての画面解像度に変更する必要があります。そして、幅だけでなく高さによってもサイズ変更することを意味します。特に、全高のセクションがある場合はそうです。

最終的に、CSS は次のような行でいっぱいになります。

@media screen and (max-width: 1199px) { /*styles here*/ }
@media screen and (max-width: 1023px) { /*more styles here*/ }
@media screen and (max-width: 767px) { /*another styles here*/ }

それは迷惑です!自動的に応答性を組み込むことができれば、ずっと簡単になると思いませんか?もちろん、応答性のルールを提供する必要はありますが、数十の画面解像度に合わせてルールを記述する必要はありません。

単位系

レスポンシブ デザインについて最初に理解する必要があるのは、ピクセルのことを忘れる必要があるということです。

あるユニットから別のユニットに切り替えるのは難しいかもしれませんが、ピクセルを使用するのは過去の話です。

サイズの単位としてピクセルを使用する場合の最大の問題は、Web サイトを閲覧するユーザーのデバイスがカウントされないことです。

最新のブラウザのデフォルトのルート フォント サイズは 16 ピクセルです。つまり、1rem = 16pxということになります。しかし、それは、ユーザーがブラウザ設定でその値を任意に変更できないという意味ではありません。

ユーザーのデフォルトのブラウザのフォント サイズが 24 ピクセルだと想像してください。ただし、body タグのフォント サイズを 16 ピクセルに設定しました。

ユーザーが期待する内容は次のとおりです:

ルートフォントサイズは 24px です

そして、これがユーザーに実際に表示されるものです:

ルートフォントサイズは 16px です

特に視覚に問題がある人に影響を与えるため、その人にとってあなたのページはアクセスしにくくなります。

もちろん、いつでもあなたのページをズームできますが、この場合、ズームインすることが想定されていない、開かれている他の Web サイトに影響を与えることになります。

ところで、Lorem Ipsum サイトは、フォント、マージン、パディングなどにピクセルを使用している場合、ページがいかに UX フレンドリーではないかを示す非常に「良い」悪い例です。

rem や vw などの相対単位に詳しくない場合は、MDN のこの記事を確認してください。CSS 単位と値について詳しく説明しています: https://developer.mozilla.org/en- US/docs/Learn/CSS/Building_blocks/Values_and_units

変数の設定

レイアウトの構築を簡単にするために、最初にグローバル変数を設定しましょう。幸いなことに、CSS にはその機会があります。カスタム変数はカスケードの対象となり、その値を親から継承するため、:root 擬似クラスで定義し、HTML ドキュメント全体に適用できます。

:root {
  --primary-color: green;
  --primary-font: Helvetica, sans-serif;
  --text-font-size: clamp(1rem, 2.08vw, 1.5rem);
}

非常に単純に見えます。変数名を定義します。変数名は二重ハイフン (--) で始まる必要があります。次に、変数値を指定します。これには、任意の有効な CSS 値を指定できます。

その後、var() 関数を使用して、ドキュメント内の任意の要素または疑似クラスに対してこれらの変数を使用できます。

color: var(--primary-color);

たとえば、次のように、ページ上のすべての見出しに --primary-color 変数を使用できます。

h1, h2, h3, h4, h5, h6 {
  color: var(--primary-color);
}

原色はページ上で非常に多くの異なる要素を使用するため、毎回色自体を記述する代わりに変数を使用すると非常に便利です。

最後の変数 --text-font-size:clamp(1rem, 2.08vw, 1.5rem) は奇妙に見えるかもしれません。クランプとは何で、フォント サイズ変数に対して何を行っているのでしょうか?

動的なフォントのスケーリング

clamp() CSS 関数は、定義された最小範囲と最大範囲の間の値の範囲内の中間値をクランプします。

最小値 (上記の例では 1rem)、優先値 (2.08vw)、および最大許容値 (1.5rem) を指定する必要があります。

ここで最も注意が必要な部分は、優先値を設定することです。ビューポートの相対単位 (vw や vh など) で指定する必要があります。したがって、ユーザーがブラウザのサイズを変更したり、デバイスの向きを変更したりすると、フォント サイズも比例して拡大縮小されます。

推奨値を計算するために次の式を作成しました:

値 = AMValue * remInPx / (containerWidth / 100)

ここで説明しますが、慌てる必要はありません:

AMValue - 許容される最小値と最大値の間の算術平均 (rem 単位)。この例では、(1rem 1.5rem) / 2 = 1.25rem

に等しくなります。

remInPx - デフォルトサイズのピクセル単位の 1rem、デザインに応じて、通常は 16px に相当します

containerWidth - コンテンツ コンテナ ブロックの最大幅 (ピクセル単位)。幅の 1% を取得するには、その値を 100 で割る必要があります。この例では、960px に相当します。

その方程式の引数を実数に置き換えると、次のようになります。

value = 1.25 \* 16 / (960 / 100) = 2.08

Let’s check how it will scale:

I know it’s not a perfect solution. Besides, we attach again to pixels, when calculating the preferred value. It’s just one of many possible options to make our fonts scale between viewports sizes.

You can use other CSS functions like min() or max(), or create a custom method to calculate the preferred value in the clamp() function.

I wrote an article about dynamic font size scaling, only for pixel units. It’s a bit outdated, but still you might find it helpful:

Dynamic font-size using only CSS3

Ok, enough of the fonts, let’s go further to the layout!

Layout with equal column width

Let’s start with some simple layout with 6 equal columns.

With media queries you need to write a bunch of extra CSS code to handle how they should wrap on different screen sizes. Like this:

/* by default we have 6 columns */
.column {
  float: left;
  width: calc(100% / 6);
}
/* decrease to 4 columns on the 1200px breakpoint */
@media screen and (max-width: 1200px) {
  .column {
    width: calc(100% / 4);
  }
}
/* decrease to 3 columns on the 1024px breakpoint */
@media screen and (max-width: 1024px) {
  .column {
    width: calc(100% / 3);
  }
}
/* finally, decrease to 2 columns for the viewport width less than or equal to 768px */
@media screen and (max-width: 768px) {
  .column {
    width: calc(100% / 2);
  }
}

Woah! That’s a lot of code, I must say! Wouldn't it be better to just make it scale automatically?

And here’s how, thanks to the CSS grid layout:

.row {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(10em, 1fr) );
}

All we need to do is to set the parent block of our columns to be displayed as a grid. And then, create a template for our columns, using grid-template-columns property.

This is called RAM technique (stands for Repeat, Auto, Minmax) in CSS, you can read about it in more details here:

RAM Technique in CSS

In that property we use the CSS repeat() function.

The first argument is set to auto-fit, which means it FITS the CURRENTLY AVAILABLE columns into the space by expanding them so that they take up any available space. There’s another value for that argument: auto-fill. To understand the difference between them check this pen:

Also, I highly recommend to read this article from CSS tricks about auto sizing columns in CSS grid: https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/

The second argument is using another function minmax(), which defines the size of each column. In our example each column should not be less than 10em and should be stretched to the remaining space.

Looks fine, but we have a problem - the number of columns can be bigger than 6!

To make a limit of columns, we need some custom formula again. But hey, it’s still in CSS! And it’s not that scary, basically, you just need to provide a gap for the grid, a minimal column width and the max number of columns.

Here’ the code:

.grid-container {

  /** * User input values. */
  --grid-layout-gap: 1em;
  --grid-column-count: 4;
  --grid-item--min-width: 15em;

  /** * Calculated values. */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);

}

And here’s what we achieve with that:

As you can see, we can use the relative values for the columns min width and gap, which makes this code like the perfect solution. Until they build the native CSS property for that, of course ?

Important notice! If you don't need a gap between columns, you need to set it to 0px or 0em, not just 0 (pure number). I mean you have to provide the units, otherwise the code won’t work.

I’ve found that solution on CSS tricks, so in case you want to dive deeper to how that formula works, here’s the original article about it: https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/

Layout with different column width

The solution above works perfectly for the grids with equal width of the columns. But how to handle layouts with unequal columns? The most common example is a content area with a sidebar, so let’s work with this one.

Here’s a simple markup of the content area along with sidebar:

<section class="content">
  <aside>
    <h2>This is sidebar</h2>
    <section class="grid">
      <div class="grid-item">Grid Item 1</div>
      <div class="grid-item">Grid Item 2</div>
    </section>
  </aside>
  <article>
    <h2>This is content</h2>
    <section class="grid">
      <div class="grid-item">Grid Item 1</div>
      <div class="grid-item">Grid Item 2</div>
      <div class="grid-item">Grid Item 3</div>
      <div class="grid-item">Grid Item 4</div>
    </section>
  </article>
</section>

For the .content section let’s use the flex box layout:

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

The flex-wrap property here is important and should be set as wrap in order to force the columns (sidebar and content area) stack under each other.

For the sidebar and content columns we need to set flex properties like grow and basis:

/* Sidebar */
.content > aside {
  border: 1px solid var( - primary-color);
  padding: var( - primary-padding);
  flex-grow: 1;
  flex-basis: 15em;
}

/* Content */
.content > article {
  border: 1px solid var( - primary-color);
  padding: var( - primary-padding);
  flex-grow: 3;
  flex-basis: 25em;
}

The flex-basis property sets the initial size of the flex item. Basically, it’s a minimum width which the flex item should have.

The flex-grow property sets the flex grow factor — similar to the proportion of the flex item compared to the other flex items. It’s a very rough and approximate explanation, to understand better the flex-grow property I highly recommend to read this article from CSS tricks: https://css-tricks.com/flex-grow-is-weird/

So if we set the flex-grow: 1 for the sidebar and flex-grow: 3 for the content area, that means the content area will take approximately three times more space than the sidebar.

I also added the grid section from the previous example to demonstrate that it works inside the flex layout as well.

Here’s what we have in the final result:

Stackable columns

It’s pretty common, when you have a grid layout where text comes next to image on one row and then in reverse order on the next row:

But when the columns become stacked you want them to be in a specific order, where text comes always before image, but they don’t:

To achieve that we need to detect somehow when the columns become stacked.

Unfortunately, it’s impossible (yet) to do that with pure CSS. So we need to add some JS code to detect that:

/**
* Detect when elements become wrapped
*
* @param {NodeList} items - list of elements to check
* @returns {array} Array of items that were wrapped
*/
const detectWrap = (items) => {
  let wrappedItems = [];
  let prevItem = {};
  let currItem = {};

  for (let i = 0; i < items.length; i++) {
    currItem = items[i].getBoundingClientRect();

    if (prevItem) {
      let prevItemTop = prevItem.top;
      let currItemTop = currItem.top;

      // if current's item top position is different from previous
      // that means that the item is wrapped
      if (prevItemTop < currItemTop) {
        wrappedItems.push(items[i]);
      }

    }

    prevItem = currItem;

  }

  return wrappedItems;
};

const addWrapClasses = (wrapper, cover) => {
  const items = wrapper.querySelectorAll(":scope > *");

  // remove ".wrapped" classes to detect which items was actually wrapped
  cover.classList.remove("wrapped");

  // only after that detect wrap items
  let wrappedItems = detectWrap(items); // get wrapped items

  // if there are any elements that were wrapped - add a special class to menu
  if (wrappedItems.length > 0) {
    cover.classList.add("wrapped");
  }

};

The function addWrapClasses() accepts two arguments.

The first one is wrapper — it’s a parent element of the items which we should check whether they are wrapped (stacked) or not.

The second argument cover is an element to which we apply a special CSS class .wrapped. Using this class you can change your layout when the columns become stacked.

If you want to apply the .wrapped class directly to the wrapper element you can pass the same element as the second argument.

For better understanding my “wonderful” explanation please see the pen below, hope it will become more clear for you:

You can also use it to detect when the header menu should be collapsed into the burger. You can read about that case in my article here:

An Easy Way to Make an Auto Responsive Menu

Combining all together

Here’s a pen with all the techniques I mentioned in this article combined:

Final thoughts

I’ve used the techniques from this article in my recent project and it worked very well. The web pages look fine on every screen with no need to optimise them manually on multiple breakpoints.

Of course I will be lying if I tell you I didn’t use media queries at all. It all depends on the design and how flexible you can be with modifying page layout. Sometimes it’s much faster and simpler just to add a couple of breakpoints and then fix CSS for them. But I think eventually CSS media queries will be replaced by CSS functions like clamp() which allow developers to create responsive layouts automatically.

---

If you find this article helpful — don’t hesitate to like, subscribe and leave your thoughts in the comments ?

---

Read more posts on my Medium blog

---

Thanks for reading!

Stay safe and peace to you!

以上がメディアクエリを使用しない応答性の高いレイアウトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。