Reka Letak Responsif Tanpa Pertanyaan Media

Berapa kerapkah anda menggunakan pertanyaan media semasa membina reka letak web? Saya telah menghabiskan terlalu banyak masa untuk mereka!

Mula-mula anda meluangkan banyak masa untuk cuba membuat reka letak betul-betul seperti dalam reka bentuk. Tetapi kemudian anda perlu mengubah saiz penyemak imbas anda kepada semua resolusi skrin yang mungkin untuk memastikan halaman anda masih kelihatan baik pada kesemuanya. Dan saya bermaksud mengubah saiz bukan sahaja mengikut lebar, tetapi mengikut ketinggian juga - terutamanya, jika anda mempunyai bahagian ketinggian penuh.

Akhirnya, CSS anda menjadi penuh dengan baris seperti ini:

@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*/ }

Dan itu menjengkelkan! Bukankah lebih mudah jika anda boleh memasukkan jenis responsif secara automatik? Sudah tentu, anda masih perlu menyediakan peraturan untuk responsif, tetapi tanpa perlu menulisnya untuk berpuluh-puluh resolusi skrin.

Sistem unit

Perkara pertama yang anda perlu fahami tentang reka bentuk responsif ialah anda perlu melupakan piksel.

Saya tahu mungkin sukar untuk bertukar dari satu unit ke unit yang lain, tetapi menggunakan piksel adalah suara dari masa lalu.

Masalah terbesar menggunakan piksel sebagai unit saiz ialah anda tidak mengira peranti pengguna dari mana ia melihat tapak web anda.

Saiz fon akar lalai untuk penyemak imbas moden ialah 16px. Ini bermakna 1rem = 16px. Tetapi itu tidak bermakna pengguna tidak boleh menukar nilai itu dalam tetapan penyemak imbas kepada apa sahaja yang mereka mahu.

Jadi bayangkan saiz fon penyemak imbas lalai pengguna ialah 24px. Tetapi anda telah menyediakan saiz fon teg badan kepada 16px.

Inilah perkara yang diharapkan oleh pengguna untuk melihat:

Saiz fon root sama dengan 24px

Dan inilah yang sebenarnya dilihat pengguna:

Saiz fon root sama dengan 16px

Ia terutamanya memberi kesan kepada orang yang mengalami masalah penglihatan, justeru halaman anda tidak akan dapat diakses oleh mereka.

Sudah tentu, mereka sentiasa boleh mengezum halaman anda, tetapi dalam kes ini, ia akan menjejaskan tapak web lain yang dibuka, yang mungkin tidak sepatutnya dizum masuk.

BTW, tapak Lorem Ipsum ialah contoh buruk yang sangat "baik" tentang cara halaman yang tidak mesra UX kelihatan jika anda menggunakan piksel untuk fon, jidar, pelapik dll.

Jika anda tidak biasa dengan unit relatif seperti rem dan vw, anda harus menyemak artikel ini di MDN, di mana anda boleh menyelami lebih dalam unit dan nilai CSS: https://developer.mozilla.org/en- AS/docs/Learn/CSS/Building_blocks/Values_and_units

Sediakan pembolehubah

Untuk memudahkan membina reka letak, mari sediakan pembolehubah global dahulu. Nasib baik, dalam CSS kita mempunyai peluang itu. Memandangkan pembolehubah tersuai tertakluk kepada lata dan mewarisi nilainya daripada induknya, kami akan mentakrifkannya pada kelas pseudo :root, dengan itu ia boleh digunakan pada keseluruhan dokumen HTML.

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

Kelihatan agak mudah - kami mentakrifkan nama pembolehubah, yang mesti bermula dengan tanda sempang berganda (--). Kemudian berikan nilai pembolehubah, yang boleh berupa nilai CSS yang sah.

Kemudian kita boleh menggunakan pembolehubah tersebut untuk sebarang elemen atau kelas pseudo dalam dokumen menggunakan fungsi var():

color: var(--primary-color);

Sebagai contoh, kita boleh menggunakan pembolehubah --warna-utama untuk semua tajuk pada halaman seperti ini:

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

Memandangkan warna utama akan menggunakan banyak elemen berbeza pada halaman, sangat berguna untuk menggunakan pembolehubah dan bukannya menulis setiap kali warna itu sendiri.

Pembolehubah terakhir --text-font-size: clamp(1rem, 2.08vw, 1.5rem) mungkin kelihatan ganjil: apakah pengapit itu dan apakah yang dilakukannya pada pembolehubah saiz fon?

Penskalaan fon dinamik

Fungsi CSS clamp() mengapit nilai tengah dalam julat nilai antara sempadan minimum yang ditentukan dan sempadan maksimum.

Anda perlu memberikan nilai minimum (iaitu 1rem daripada contoh di atas), nilai pilihan (2.08vw) dan nilai maksimum yang dibenarkan (1.5rem).

Bahagian yang paling rumit di sini ialah untuk menetapkan nilai pilihan. Ia sepatutnya dalam beberapa unit relatif viewport (seperti vw atau vh). Oleh itu, apabila pengguna mengubah saiz pelayarnya atau menukar orientasi peranti, saiz fon akan berskala secara berkadar.

Saya telah membuat formula ini untuk mengira nilai pilihan:

nilai = AMValue * remInPx / (containerWidth / 100)

Inilah penjelasan, tiada panik:

AMValue - min aritmetik, antara nilai minimum dan maksimum yang dibenarkan dalam rem. Dalam contoh kami ia sama dengan (1rem 1.5rem) / 2 = 1.25rem

remInPx - saiz lalai 1rem dalam piksel, bergantung pada reka bentuk anda, biasanya ia bersamaan dengan 16px

ContainerWidth - lebar maksimum blok kontena anda (dalam piksel). Kita perlu membahagikan nilai itu kepada 100 untuk mendapatkan 1% daripada lebar. Dalam contoh ia sama dengan 960px.

Jadi, jika anda menggantikan hujah dalam persamaan itu dengan nombor nyata, anda akan mendapat:

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!

Atas ialah kandungan terperinci Reka Letak Responsif Tanpa Pertanyaan Media. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!