미디어 쿼리가 없는 반응형 레이아웃

웹 레이아웃을 구축할 때 미디어 쿼리를 얼마나 자주 사용하십니까? 너무 많은 시간을 투자했어요!

처음에는 디자인과 똑같은 레이아웃을 만들기 위해 꽤 많은 시간을 보냈습니다. 하지만 그런 다음에는 페이지가 모든 화면에서 여전히 잘 보이도록 브라우저 크기를 가능한 모든 화면 해상도로 조정해야 합니다. 너비뿐만 아니라 높이도 기준으로 크기를 조정한다는 의미입니다. 특히 전체 높이 섹션이 있는 경우에는 더욱 그렇습니다.

결국 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*/ }

그리고 짜증나네요! 자동으로 반응성을 포함할 수 있다면 훨씬 더 쉽지 않을까요? 물론 반응성에 대한 규칙을 제공해야 하지만 수십 가지 화면 해상도에 맞게 작성할 필요는 없습니다.

단위계

반응형 디자인에 대해 가장 먼저 이해해야 할 것은 픽셀을 잊어야 한다는 것입니다.

한 유닛에서 다른 유닛으로 전환하는 것이 어려울 수도 있지만 픽셀을 사용하는 것은 과거의 목소리입니다.

픽셀을 크기 단위로 사용할 때 가장 큰 문제점은 웹사이트를 보는 사용자의 기기를 계산할 수 없다는 것입니다.

최신 브라우저의 기본 루트 글꼴 크기는 16픽셀입니다. 이는 1rem = 16px을 의미합니다. 그러나 이것이 사용자가 브라우저 설정에서 해당 값을 원하는 대로 변경할 수 없다는 의미는 아닙니다.

사용자의 기본 브라우저 글꼴 크기가 24픽셀이라고 가정해 보세요. 그런데 body 태그의 글꼴 크기를 16px로 설정하셨네요.

사용자가 기대하는 내용은 다음과 같습니다.

루트 글꼴 크기는 24px입니다

사용자가 실제로 보는 것은 다음과 같습니다.

루트 글꼴 크기는 16픽셀입니다

특히 시력 문제가 있는 사람들에게 영향을 미치므로 해당 사람들이 귀하의 페이지에 쉽게 접근할 수 없습니다.

물론 언제든지 페이지를 확대/축소할 수 있지만 이 경우 열려 있는 다른 웹사이트에 영향을 미치므로 확대할 수 없습니다.

그런데 Lorem Ipsum 사이트는 글꼴, 여백, 패딩 등에 픽셀을 사용할 경우 페이지가 UX 친화적이지 않은 모습을 보여주는 매우 "좋은" 나쁜 예입니다.

rem 및 vw와 같은 상대 단위에 익숙하지 않다면 MDN에서 CSS 단위 및 값에 대해 자세히 알아볼 수 있는 이 기사를 확인해야 합니다: https://developer.mozilla.org/en- 미국/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: 클램프(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!