Responsive Layouts ohne Medienabfragen

Wie oft verwenden Sie Medienabfragen beim Erstellen von Weblayouts? Ich habe zu viel Zeit damit verbracht!

Zuerst haben Sie ziemlich viel Zeit damit verbracht, das Layout genau so zu gestalten, wie es im Design vorkommt. Dann müssen Sie jedoch die Größe Ihres Browsers auf alle möglichen Bildschirmauflösungen anpassen, um sicherzustellen, dass Ihre Seite auf allen noch gut aussieht. Und ich möchte die Größe nicht nur in der Breite, sondern auch in der Höhe ändern – insbesondere, wenn Sie Abschnitte mit voller Höhe haben.

Irgendwann wird Ihr CSS voller Zeilen wie dieser:

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

Und das ist nervig! Wäre es nicht viel einfacher, wenn Sie die Reaktionsfähigkeit quasi automatisch einbeziehen könnten? Natürlich müssen Sie weiterhin die Regeln für die Reaktionsfähigkeit angeben, ohne diese jedoch für Dutzende von Bildschirmauflösungen schreiben zu müssen.

Einheitensystem

Das erste, was Sie über responsives Design verstehen müssen, ist, dass Sie Pixel vergessen müssen.

Ich weiß, dass es schwierig sein könnte, von einer Einheit zur anderen zu wechseln, aber die Verwendung von Pixeln gehört der Vergangenheit an.

Das größte Problem bei der Verwendung von Pixeln als Größeneinheit besteht darin, dass Sie nicht mitzählen, auf welchem ​​Gerät der Benutzer Ihre Website anzeigt.

Die Standardschriftgröße für moderne Browser beträgt 16 Pixel. Das bedeutet 1rem = 16px. Das bedeutet jedoch nicht, dass Benutzer diesen Wert in den Browsereinstellungen nicht beliebig ändern können.

Stellen Sie sich also vor, die Standardschriftgröße des Browsers des Benutzers beträgt 24 Pixel. Aber Sie haben die Schriftgröße des Body-Tags auf 16 Pixel eingestellt.

Das erwartet der Benutzer:

Die Grundschriftgröße beträgt 24 Pixel

Und das sieht der Benutzer tatsächlich:

Die Grundschriftgröße beträgt 16 Pixel

Es betrifft insbesondere Menschen mit Sehproblemen, daher ist Ihre Seite für sie nicht sehr gut zugänglich.

Natürlich können sie Ihre Seite jederzeit vergrößern, aber in diesem Fall wirkt sich dies auf andere geöffnete Websites aus, die möglicherweise nicht vergrößert werden sollten.

Übrigens ist die Website von Lorem Ipsum ein sehr „gutes“ schlechtes Beispiel dafür, wie nicht UX-freundlich eine Seite aussehen kann, wenn Sie Pixel für Schriftarten, Ränder, Abstände usw. verwenden.

Wenn Sie mit den relativen Einheiten wie rem und vw nicht vertraut sind, sollten Sie diesen Artikel im MDN lesen, in dem Sie tief in die CSS-Einheiten und -Werte eintauchen können: https://developer.mozilla.org/en- US/docs/Learn/CSS/Building_blocks/Values_and_units

Setup-Variablen

Um den Aufbau des Layouts zu vereinfachen, richten wir zunächst globale Variablen ein. Glücklicherweise haben wir in CSS diese Möglichkeit. Da benutzerdefinierte Variablen der Kaskade unterliegen und ihren Wert von ihrem übergeordneten Element erben, definieren wir sie in der Pseudoklasse :root, sodass sie auf das gesamte HTML-Dokument angewendet werden können.

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

Sieht ziemlich einfach aus – wir definieren einen Variablennamen, der mit einem doppelten Bindestrich (--) beginnen muss. Geben Sie dann einen Variablenwert an, der ein beliebiger gültiger CSS-Wert sein kann.

Dann können wir diese Variablen für jedes Element oder sogar jede Pseudoklasse im Dokument verwenden, indem wir die Funktion var() verwenden:

color: var(--primary-color);

Zum Beispiel können wir unsere Variable --primary-color für alle Überschriften auf der Seite wie folgt verwenden:

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

Da die Primärfarbe viele verschiedene Elemente auf der Seite verwendet, ist es sehr praktisch, die Variable zu verwenden, anstatt jedes Mal die Farbe selbst zu schreiben.

Die letzte Variable --text-font-size: clamp(1rem, 2.08vw, 1.5rem) könnte seltsam aussehen: Was ist die Klammer und was macht sie mit der Schriftgrößenvariablen?

Dynamische Schriftskalierung

Die CSS-Funktion „clamp()“ klemmt einen Mittelwert innerhalb eines Wertebereichs zwischen einer definierten Mindestgrenze und einer Höchstgrenze.

Sie müssen einen Mindestwert (der im Beispiel oben 1rem entspricht), einen bevorzugten Wert (2,08vw) und den maximal zulässigen Wert (1,5rem) angeben.

Der schwierigste Teil hier besteht darin, den bevorzugten Wert festzulegen. Es sollte in einigen relativen Einheiten des Ansichtsfensters angegeben werden (z. B. vw oder vh). Wenn ein Benutzer also die Größe seines Browsers ändert oder die Ausrichtung des Geräts ändert, wird die Schriftgröße proportional skaliert.

Ich habe diese Formel zur Berechnung des bevorzugten Werts erstellt:

value = AMValue * remInPx / (containerWidth / 100)

Hier kommt eine Erklärung, keine Panik:

AMValue – arithmetisches Mittel zwischen dem minimal und maximal zulässigen Wert in rem. In unserem Beispiel ist es gleich (1rem 1,5rem) / 2 = 1,25rem

remInPx – Standardgröße von 1rem in Pixeln, je nach Design entspricht sie normalerweise 16px

containerWidth – die maximale Breite Ihres Inhaltscontainerblocks (in Pixel). Wir müssen diesen Wert durch 100 dividieren, um 1 % der Breite zu erhalten. Im Beispiel entspricht es 960px.

Wenn Sie also die Argumente in dieser Gleichung durch reelle Zahlen ersetzen, erhalten Sie:

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!

Das obige ist der detaillierte Inhalt vonResponsive Layouts ohne Medienabfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!