미디어 쿼리없이 적응 형 레이아웃 빌드

Sep 17, 2025

어떻게

오랫동안 나는 웹 페이지에서 완벽한 시각적 인 구성에 도달하려고했습니다. 나는 일상적인 일에서 CSS 중단 점으로 많은 고통을 겪었으며 반응 형 레이아웃을 취급하는 공통된 방법으로 결코 만족하지 못했습니다. 최근에 나는 매우 멋진 것을 발견했습니다 [삼] 반응 형 웹 디자인

모든 것을 간단하고 일관되고 논리적으로 모든 것을 만드는 트릭을 당신과 함께 공유하기를 열망합니다.

이 기사는 주로 창의적인 개발에 관한 것입니다. 따라서이 기술을 유용하게 찾을 수있는 프런트 엔드 개발자와 웹 프로덕션에 대한 일반적인 이해와 최종 출력을 향상시킬 수있는 웹 디자이너를 찾을 수 있습니다. CSS, 중단 점 및 미디어 쿼리에 대해 이미 알고 있음을 가정합니다.

[삼] 그리드와 FlexBox가있는 블로그를 구축하십시오

전통적인 방법

Adaptive layouts: breakpoints — 중단 점은 비표준 뷰포트에 대한 불만이없는 결과로 이어질 수 있습니다.

휴대용 장치가 세계를 다루고 있습니다. 다양한 모든 종류의 장치가 웹 사이트를 만드는 방식을 변경하고 있습니다. '반응 형 웹 사이트'로 대부분의 사람들은 데스크톱 및 모바일 버전 (때로는 데스크탑, 태블릿, 모바일) 만 가정합니다. 이것은 전통적으로 작동하는 방식입니다.

 H1 {
글꼴 크기 : 80px;
}
.Container {
너비 : 980px;
마진 : 0 자동;
}

@ Media (최대 너비 : 1023px) {
H1 {
글꼴 크기 : 48px;
}
.Container {
너비 : 자동;
패딩 : 0 30px;
}
}

사실, 일반적으로 [삼] 웹 사이트 레이아웃

우리는 우리의 장치에 대해서는보고 있습니다. 예를 들어, 우리가 & lt; h1 & gt의 글꼴 크기를 어떻게 조정하는지 봅시다. 표제:

Adaptive layouts — 하나의 중단 점만으로는 이상한 지점 크기로 끝날 수 있습니다.

당신은 우리의 & lt; h1 & gt; 제목에는 320px 및 800px 너비 장치에 "글꼴 크기 : 48px"및 1024px 및 2560px에서 "글꼴 크기 : 80px"가 있습니다.

물론, 우리는 더 많은 중단 점을 추가 할 수 있지만 다른 장치의 수는 수많은 것입니다! 이것은 어떤 가치가 어떤 화면에 적용되는지 아는 것이 어렵 기 때문에 디자인 사양을 매우 복잡하고 혼란스럽게 만들 것입니다.

Adaptive layouts: font size — 모든 화면에서 글꼴 크기를 완벽하게 얻을 수있는 충분한 중단 점을 만들 수 없습니다.

우리가 정말로 필요로하는 것은 이것입니다.

뷰포트 단위

Adaptive layouts: viewpoint units — 뷰포트 단위는 문제를 개선하지만 여전히 일이 필요합니다.

이 문제에 대한 해결책은 뷰포트 단위 VW 및 VH를 포함합니다. 이들은 뷰포트의 폭 / 높이의 1/100을 나타내는 길이 단위 (IE9 +의 브라우저에서 널리 지원됨)입니다.

우리는 이들을 사용하여 크기에 따라 웹 페이지의 속성을 조정할 수 있습니다. 상황은 조금 더 나아질 것입니다. 그러나 고통은 여전히 동일합니다.

 H1 {
글꼴 크기 : CALC ((80 / 1920) * 100VW;
}
.Container {
너비 : 80VW;
마진 : 0 자동;
}

@ Media (최대 너비 : 1023px) {
H1 {
글꼴 크기 : CALC ((48 / 375) * 100VW;
}
.Container {
너비 : 90VW;
}
}

너무 크거나 너무 작 으면 우리는 결코 알지 못합니다.

진정한 적응 형 레이아웃 시스템을 어떻게 구축 할 수 있습니까? 320px에서 2560px까지 기본적으로 작동하는 반응 형 웹 사이트를 어떻게 설계합니까?

이상적으로, 당신의 mockup은 레이아웃 뒤의 논리를 설명해야하며 더 작은 해상도에서 더 큰 해상도로 적응하는 방법을 설명해야합니다.

해결책

Adaptive layouts: solution — 진정한 적응 형 레이아웃 시스템을 만드는 방법은 다음과 같습니다.

우리는 작은 화면에서 큰 화면으로 속성을 지속적으로 조정하고자합니다. 중단 점 및 미디어 쿼리가 없습니다. 우리가 원하는 것은 모든 디스플레이에 대해 작동하는 단일 값입니다.

두 변수가있는 수학 함수가 키입니다. 예를 들어, 제목 글꼴 크기를 조정하려는 경우 다음과 같이 함수가 표시됩니다.

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

1920 - 디자인 모형의 기본 데스크탑 너비 (Equals 100vw)
375 - 디자인 모형의 기본 모바일 너비 (Equals 100VW)
80 - 바탕 화면에 H1 타이틀 글꼴 크기를 원하는 것입니다
48 - 모바일에 원하는 H1 제목 글꼴 크기

이들은 x 및 y 값입니다.

x = (80 - 48) / (1920 - 375)
x = 0.0207.

Y = 80 - 1920 * 0.0207.
y = 40.256.

이 값을 사용하려면 웹 페이지에서 계산을 수행하는 Calc CSS 함수가 필요합니다 (IE9 +에서 브라우저에서 널리 지원되는). 우리는 x * 100 번을 계산해야합니다 (1vw 단위 = 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)}

놀랍게도 우리가 어떻게 원했던 방법을 마침내 잘 작동합니다!

모든 디스플레이에 대한 하나의 속성 만 있습니다. 값을 다시 겹쳐 쓰지 않아도됩니다. 폭, 글꼴 크기, 패딩, 여백 등의 모든 종류의 속성을 조정하고 계산할 수 있습니다.

이 기술을 사용하여 실제 레이아웃을 구축하려고 노력해 봅시다.

그러나이 접근 방식은 한 가지 단점이 있습니다.이 칼럼 함수 뒤에 어떤 가치가 있는지 이해하기가 어렵습니다. 어떻게 그것을 단순화 할 수 있습니까?

HTML을 매일 코딩하는 경우 SASS / SCSS 사전 프로세서에 익숙 할 수 있습니다. 여기에 약간의 도움이 필요합니다. "mixin"을 만들고 이러한 모든 계산이 자동으로 일어나고 원래 값을 유지하십시오.

위에서 설명한 것과 동일한 기능이지만 Sass Mixin으로 만들어졌습니다.

 $ 디스플레이 전체 : 1920.
$ 디스플레이 좁은 : 375.

@mixin 유체 ($ property, $ minvalue, $ maxValue)
  $ x : ($ maxvalue - $ minvalue) / ($ display-wide - $ display-lanrow)
  $ y : $ maxvalue - $ display-wide * $ x
  # {$ 속성} : Calc (# {100 * $ x} vw + # {$ y} px)

H1.
  @include 유체 ( '글꼴 크기', 48,80)

.컨테이너
  @include 유체 ( '너비', 315,1580)
@include 유체 ( '패딩', 30,60)

Adaptive layouts: mixin — Sass Mixin은 전체 프로세스를 더 쉽게 만들 수 있습니다

이 기술 마지막으로 진정한 반응 형 웹 레이아웃을 구축하기위한 매우 정교한 솔루션을 제공합니다. 대부분의 브라우저를 지원하고 프로젝트를 방문자에게 올바르게 표시하고 스타일 구조를 단순화하며 가장 중요한 것은 웹 레이아웃을 일관되고 논리적으로 만들어줍니다. 나는 당신이 어떤 놀라운 웹 프로젝트를 시작하는 데 도움이되기를 바랍니다.

관련 기사:

[삼] 17 정말 유용한 반응 형 웹 디자인 자습서

[삼] 반응 형 웹 타이포그래피의 규칙

[삼] CSS 눈금으로 응답 성 레이아웃을 만듭니다

미디어 쿼리없이 적응 형 레이아웃 빌드

전통적인 방법

뷰포트 단위

해결책

어떻게 - 가장 인기있는 기사

mo.js 라이브러리로 애니메이션을 어떻게 만드는 방법

디자인 포트폴리오를 개선하는 방법

캐릭터 아트를 향상시키는 방법

믿을만한 판타지 짐승을 디자인하는 방법

5 분 이내에 그림을 그립니다

V-RAY로 더 나은 조명을 달성하는 방법

디지털 자산을 만드는 방법

파스텔이있는 풍경을 그리는 방법

카테고리