안녕하세요, 일반 방문자 및 블로그 사이트의 일반 독자 여러분!

이 사이트가 존재하는 동안 나는 템플릿을 여러 번 변경했고 처음부터 나만의 템플릿을 만들기도 했습니다.
새 템플릿을 선택할 때 주요 작업 중 하나는 모든 화면 해상도에 대한 사이트의 적응형 레이아웃입니다.

기사의 간략한 개요:

이전 기사에서 나는 이것이 왜 필요한지에 대해 이미 썼습니다. 하지만 이러한 적응성을 어떻게 달성할 수 있을까요?

이를 수행하는 방법에는 여러 가지가 있습니다. 일부는 자바스크립트를 사용하고 일부는 다른 것을 사용합니다. 하지만 가장 간단하고 정확한 방법은 CSS를 사용하는 적응형이라고 생각합니다.

반응형 웹사이트 레이아웃을 만드는 방법

첫째로, 반응형 웹사이트 디자인을 만들려는 경우 태그 사이에 다음 코드를 붙여넣으세요.

적응형 웹사이트 레이아웃을 만들려고 할 때 바로 이 작업을 수행하지 않았다는 것이 얼마나 어리석은 일입니까!!!
모바일 브라우저의 문제는 웹사이트 레이아웃의 확장성, 심지어 적응형 레이아웃의 확장성입니다.

내가 디자인을 그린 다음 필요한 스타일과 쿼리를 모두 기록하고 다양한 해상도에서 사이트의 적응성을 확인한다고 상상해 보세요. 모든 것이 괜찮은 것 같습니다! 그런데 스마트폰으로 블로그를 열어보니 사이트가 단순히 축소되어 있는 것을 볼 수 있습니다. 모바일 기기에 적응하지 못하고 단순히 폰트나 그림 등의 크기를 줄였습니다.

어떻게요? 나는 클래스를 올바르게 작성했는지 알아보기 위해 모든 스타일을 다시 확인하기 시작했고 결국 자바스크립트를 사용하여 브라우저 창의 너비를 px 단위로 확인하는 지점에 이르렀습니다. 나는 충격 받았다. 노트북으로 확인해보니 1024px라는 결과가 나왔고, 스마트폰으로 사이트를 열어봐도 거의 같은 결과가 나왔어요!

그러나 그럴 수는 없습니다!

드러내다, 위에 표시된 코드를 작성하지 않으면 모바일 브라우저는 사이트가 반응형이라는 것을 인식하지 못합니다.작은 휴대폰 화면에 맞도록 웹사이트 페이지를 더 작게 만들려고 노력하고 있습니다.

저의 어리석음과 무능력으로 인해 많은 시간을 허비했습니다. 하지만 이제 나는 그것을 영원히 기억합니다))).

적응형 레이아웃 CSS 미디어 쿼리

CSS를 사용하여 반응형으로 만들려면 미디어 쿼리를 사용해야 합니다.

방법 것입니다? 예, 매우 간단합니다. CSS 파일에서 다음과 같은 쿼리를 작성해야 합니다.

@media 화면 및 (최소 너비: 1440px) 및 (최대 너비: 1599px)( )

이 코드는 "( )"로 묶인 스타일이 최소 너비 1440px, 최대 1599px의 화면에서 작동함을 의미합니다.

즉, 화면 해상도에 따라 조정되어야 하는 사이트 요소의 스타일은 가능한 각 화면 너비에 대해 별도로 작성되어야 합니다.

적응형 레이아웃에 가장 중요한 화면 해상도

• 320px- 모바일 장치(세로 방향)
• 480px- 모바일 장치(가로 방향)
• 600px- 작은 정제;
• 768px- 태블릿(세로 방향);
• 1024px- 태블릿(가로 방향)/넷북;
• 1280px 이상- PC.

적응형 레이아웃을 만들 때 집중하고 특별한 주의를 기울여야 하는 것은 바로 이러한 해결 방법입니다. 이는 가장 일반적인 유형의 화면 해상도입니다.

부트스트랩 반응형 디자인

적응형 레이아웃을 생성하려면 부트스트랩을 사용하는 것이 매우 편리합니다. 블록, 버튼, 테이블 등을 적용하기 위한 모든 스타일이 편리하다는 점입니다. bootstpap에 이미 등록되어 있습니다. 어떤 클래스에 어떤 요소를 할당할지 알아내기만 하면 됩니다.

시작하려면 최신 버전의 부트스트랩을 다운로드하여 사이트에 연결하세요. WordPress에 스타일과 스크립트를 연결하는 데는 고유한 특성이 있습니다.

Bootstrap의 레이아웃은 블록이나 화면의 너비가 12개의 동일한 부분으로 나누어진다는 점에서 다릅니다. 그리고 블록에 특정 클래스를 할당함으로써 블록의 너비를 필요한 부품 수와 동일하게 설정할 수 있습니다.

예를 들어, 이 디자인을 사용하면 너비가 8부분인 콘텐츠에 넓은 블록 하나를 할당하고 너비가 4부분인 사이드바에 좁은 블록 하나를 할당할 수 있습니다.

블록의 너비는 화면 너비에 따라 자동으로 계산됩니다. 그리고 모바일 장치에서 볼 때 이러한 블록은 서로 아래로 이동합니다.

가장자리에서 블록까지의 거리를 필요한 부품 수만큼 조정할 수도 있습니다. 예를 들어 다음 디자인은 다음과 같습니다.

화면의 1부분을 왼쪽 들여쓰기하여 10부분 너비의 블록이 생성됩니다.

살펴보면 부트스트랩으로 작업하면 작업 속도가 매우 빨라집니다. 또한 이러한 스타일은 확실히 올바르게 작동하며 사이트에 비뚤어진 부분이 없습니다.

앞으로 나는 부트랩 작업에 대한 몇 가지 강의를 게시할 계획입니다. 그러므로 이 순간을 놓치지 말라고 조언합니다.

웹사이트 적응성 확인

하지만 질문이 생깁니다. 웹 사이트의 적응성을 어떻게 확인합니까? 이제 CSS로 미디어 쿼리를 작성하고 부트스트랩을 연결했으며 필요한 클래스를 사용했습니다. 사이트가 모든 화면 해상도에서 올바르게 조정되는지 어떻게 확인할 수 있나요?

적응형 웹사이트 레이아웃을 다루는 웹마스터와 레이아웃 디자이너로부터 존경과 감사를 받을 만한 매우 정확하고 가장 중요한 무료 서비스입니다.

글쎄요, 기사가 마음에 드시나요? 공습 경보 신호? 그렇지 않은 경우 댓글을 작성해 주시면 함께 알아 보겠습니다.

그렇습니다. 반응형 웹사이트 디자인을 만들려면 열심히 노력해야 합니다. 그러나 이러한 노력은 검색 엔진, 그리고 가장 중요하게는 귀하의 사이트 방문자로부터 귀하의 사이트에 대한 호의적인 태도로 보상받을 것입니다.

반응형 웹 사이트 템플릿을 만드는 것은 충분히 쉽지만 템플릿 전체의 모든 지점에서 요소의 균형을 유지하는 것은 진정한 예술입니다. 이 튜토리얼에서는 반응형 템플릿을 위해 CSS에서 사용할 수 있는 5가지 기술을 소개합니다. 최소 너비, 최대 너비, 오버플로 및 상대 값과 같은 매우 간단한 CSS 속성이 있지만 모두 반응형 디자인을 개발하는 데 중요한 역할을 합니다.

1. 적응형 비디오

이 CSS 트릭을 사용하면 삽입된 비디오를 지정된 경계까지 늘릴 수 있습니다.

비디오( 위치: 상대; 패딩 하단: 56.25%; 높이: 0; 오버플로: 숨김; ) .video iframe, .video 객체, .video 삽입( 위치: 절대; 상단: 0; 왼쪽: 0; 너비: 100% ; 높이: 100% )

2. 최소 및 최대 너비

max-width 속성을 사용하면 요소의 최대 너비를 설정할 수 있습니다. 요소가 특정 프레임 이상으로 확장되는 것을 방지하는 데 사용해야 합니다.

최대 너비 속성이 있는 컨테이너

아래 예에서는 컨테이너 크기를 800px로 정의하지만 크기 제한을 90%로 설정합니다.

컨테이너(너비: 800px; 최대 너비: 90%; )

적응형 이미지

max-width:100% 및 height:auto 속성을 사용하면 이미지 크기가 자동으로 최대 크기로 조정되도록 할 수 있습니다.

Img(최대 너비: 100%; 높이: 자동; )

위의 반응형 이미지 코드는 IE7 및 IE9에서는 작동하지만 IE8에서는 작동하지 않습니다. 상황을 수정하려면 width:auto 속성을 추가해야 합니다. IE8에는 CSS 조건부 규칙을 사용하거나 IE에는 아래 트릭을 사용할 수 있습니다.

@media \0screen ( img ( width: auto; /* for ie 8 */ ) )

최소 너비 속성

min-width 속성은 max-width 속성과 반대입니다. 요소의 가능한 최소 너비를 설정합니다. 다음은 축소 시 입력 필드가 너무 작아지는 것을 방지하기 위해 min-width 속성을 사용하는 예입니다.

3. 상대값

반응형 템플릿에서 상대 값을 사용하면 CSS 코드를 크게 단순화하고 디자인의 모양을 향상시킬 수 있습니다.

상대 필드

다음은 왼쪽 여백의 상대적 너비를 사용하여 트리 구조에 들여쓰기를 생성하는 주석의 예입니다. 목록의 다음 수준에는 px 단위의 절대값 대신 백분율 값이 사용됩니다. 그림의 왼쪽을 보면 모바일 장치에서 절대값을 사용하는 경우 목록 항목에 사용 가능한 공간이 일반 표시에 충분하지 않을 수 있음을 알 수 있습니다.

상대적인 글꼴 크기

글꼴 크기에 대한 상대 값(em 또는 %)을 사용하면 템플릿을 장치 화면 크기에 맞게 조정할 때 줄 높이와 들여쓰기 크기를 적절하게 변경할 수 있습니다. 예를 들어, 상위 요소에 대해 새 글꼴 크기 크기를 설정하면 모든 관련 요소의 크기가 자동으로 조정됩니다.

상대 패딩

아래 그림은 패딩에 상대 % 값을 사용할 때의 이점을 보여줍니다. 왼쪽 블록은 절대 px 값을 적용할 때 공간이 불균형합니다. 오른쪽의 블록은 비례적인 내용으로 외관이 뛰어납니다.

4. Overflow:hidden 속성을 이용한 트릭

오버플로 속성을 사용하면 텍스트가 요소 주위를 감싸는 것을 방지할 수 있습니다. 매우 간단하고 유용한 방법입니다. 이전 요소 주위의 텍스트 줄 바꿈을 풀고 콘텐츠의 구조를 유지할 수 있습니다.

max-width 속성은 깨지지 않는 텍스트(예: 긴 URL)를 한 줄이 아닌 여러 줄에 맞추는 데 도움이 됩니다.

Break-word ( word-wrap: break-word; )

최근에는 사이트를 조회하는 기술과 다양한 기기(태블릿, 스마트폰, 모니터)가 점점 발전하고 있습니다.

이 영역에서는 화면 해상도가 매우 다양하므로 사이트에서 정보를 얻는 것이 어렵습니다. 대부분의 장치에서 정보를 쉽게 읽고 볼 수 있도록 적응형 설계 기술이 개발되었습니다.

반응형 디자인의 목표는 다양한 장치에서 리소스를 보고 상호 작용할 수 있는 보편적인 웹 사이트 디자인을 개발하는 것입니다.

이 기술에는 여러 장치가 아닌 모든 장치에 대한 하나의 웹사이트 버전을 개발하는 것도 포함됩니다.

반응형 웹 디자인(영어: 적응형 웹 디자인) - 인터넷에 연결된 다양한 장치에서 사이트가 올바르게 표시되도록 보장하고 지정된 브라우저 창 크기에 동적으로 적응하는 웹 페이지 디자인입니다.

반응형 디자인의 기본 원칙:

• 반응형 웹사이트 템플릿, 컴퓨터 모니터에서 스마트폰에 이르기까지 다양한 장치 화면 해상도에 적응할 수 있는 템플릿 기능;
• 콘텐츠 블록 조정 및 이동, 장치 화면 해상도에 따라 필요한 크기를 취하는 콘텐츠 블록 기능과 레이아웃의 다른 위치로 이동하는 기능
• 이미지 적응, 화면 해상도에 따라 크기를 변경하거나 더 적은 무게와 크기로 더 적합한 이미지를 로드하는 이미지의 기능입니다.
• 유연한 메쉬 사용를 사용하면 레이아웃 디자인을 빠르게 변경할 수 있습니다.
• 덜 중요한 블록 숨기기, 작은 화면에서는 일부 블록이 숨겨질 수 있습니다.
• 탐색 요소의 유용성 재작업, 모바일 장치에서는 해상도가 낮기 때문에 탐색 요소를 클릭할 수 없게 되므로 다시 디자인하여 사용하기 편리하게 만들었습니다.
• 웹페이지의 여러 요소 단순화, 일부 요소는 모바일 장치에서 사용하기 위해 단순화되었습니다.
• 비디오 콘텐츠의 각색, 비디오 적응도 고려해야 합니다.
• 미디어 쿼리 사용(미디어 쿼리)를 사용하면 적응형 레이아웃을 만들 수 있습니다.
• 모바일 우선(모바일 우선) 반응형 디자인 디자인은 모바일 장치에 대한 레이아웃부터 시작됩니다.

마지막 요점과 관련하여 이것이 올바른지 아닌지는 어려운 질문이며, 적어도 많은 사람들은 모바일 장치용 버전으로 레이아웃 개발을 시작해야 한다고 주장합니다. 나는 약간 다른 견해를 가지고 있습니다. 잘 고려된 그리드와 전체 기능을 사용하여 최대 해상도를 위한 레이아웃을 개발한 다음 이를 다른 해상도에 적용하는 것이 더 쉽습니다.

반응형 디자인 레이아웃 크기

옛날 옛적에 2012년에 나는 디자인, 즉 고정된 사이트의 레이아웃을 개발할 때 어떤 것을 선택해야 하는지에 대한 짧은 기사를 썼습니다. 이 기사는 독자들 사이에서 큰 관심을 받았습니다. 이 문제는 많은 초보 디자이너와 개발자에게 관심이 있는 것으로 나타났습니다. 이와 관련하여 나는 이 기사에서도 이 문제를 강조하기로 결정했습니다.

따라서 순전히 내 비전에 따라 레이아웃을 개발해야 하는 원리와 차원을 설명하겠습니다.

모바일 우선 원칙을 따르면 레이아웃을 개발해야 하는 해상도 크기가 있습니다. 320픽셀 / 480픽셀 / 768픽셀 / 1024픽셀 / 1280픽셀어쩌면 작업에 더 많이 의존할 수도 있습니다.

그림은 다음과 비슷하지만 특정 해상도(예: 480px)에 대한 레이아웃을 만들 필요가 없는 경우가 많습니다. 레이아웃이 중간에 중단되지 않는 경우 768 - 320px.

물론 일반 레이아웃과 마찬가지로 패딩, 스크롤바 및 기타 모든 것을 고려하여 Photoshop에서 캔버스를 만듭니다. 개발이 쉽고 레이아웃 디자인이 빨라집니다. 많은 사람들이 작업에 프레임워크를 사용하므로 자신이 개발하는 프레임워크의 그리드에 의존합니다.

덕분에 레이아웃 디자이너에게 레이아웃이 다양한 화면 해상도와 장치에서 어떻게 작동하는지 보여줄 수 있습니다. 예를 들어 작은 레이아웃을 스케치했는데 아래 스크린샷에서 볼 수 있습니다.

반응형 디자인의 미디어 쿼리 및 뷰포트

뷰포트 메타 태그는 브라우저에 페이지 크기를 표시하고 크기를 변경하는 방법을 알려주는 데 사용됩니다. 이 메타태그는 다음 언어로 작성되었습니다. 대지. 이를 통해 개발자는 CSS로 작성된 장치의 화면 너비를 설정할 수 있습니다.

뷰포트 메타 태그는 다음과 같이 작성됩니다.

• 너비=장치 너비— 사이트 페이지의 너비가 장치 화면의 너비와 일치하도록 설정되었음을 의미합니다.
• 초기 규모=1.0- 이 속성은 브라우저에 픽셀 크기를 1:1로 설정하도록 지시합니다. 즉, 크기를 조정하지 않음을 의미합니다.

메타 태그가 없는 왼쪽, 뷰포트 메타 태그를 사용하는 오른쪽.

메타태그에 대해 다른 속성과 매개변수도 설정할 수 있습니다.

미디어 쿼리

CSS3는 반응형 웹사이트 개발에 중요한 역할을 합니다. 미디어쿼리(미디어 쿼리). 미디어 쿼리에는 미디어 유형(프린터, 스마트폰, 스크린, TV, 프로젝터 등)과 조건이 포함되며 이는 결과적으로 참 또는 거짓(참, 거짓)이 될 수 있습니다. 미디어 유형이 올바른지, 조건이 충족되는지에 따라 다른 CSS 스타일이 적용됩니다. true인 경우 이 미디어 요청에 지정된 스타일이 적용되고, false인 경우 일반적인 CSS 스타일이 적용됩니다.

이러한 요청에 힘입어 모바일, 태블릿, 모니터 화면 등 다양한 사이트 디스플레이가 만들어지고 있습니다. 모든 최신 브라우저에서 지원됩니다.

다음과 같이 작성됩니다.

@미디어 화면 및 (최대 너비: 1000px) ( .class ( 속성: 값; ) )

• @미디어– 미디어 – 요청;
• 화면– 미디어 – 유형(미디어 유형이라고도 함)
• 최대 너비: 1000px– 충족해야 하는 조건(이 경우 창 너비가 1000px 미만인 경우 스타일이 적용됩니다)
• . 수업– 속성에 새로운 값이 할당되는 해당 선택기(클래스, ID)가 작성됩니다.

대부분의 경우 적응형 디자인을 개발하는 데는 다음과 같은 미디어 기능이 사용됩니다.

• 최대 너비: 너비— 브라우저 창의 너비가 지정된 너비보다 작으면 조건이 충족되고 적절한 스타일이 적용됨을 의미합니다(예: max-width: 768px, 브라우저 창의 너비가 768px보다 작다는 의미) , 미디어 쿼리에 지정된 스타일을 사용해야 합니다).
• 최소 너비: 너비- 브라우저 창의 너비가 지정된 너비보다 크면 조건이 충족되고 요청에 지정된 스타일이 적용된다는 의미입니다(예: min-width: 480px).

그러나 다른 기능도 사용할 수 있습니다.색상, 장치 너비, 그리드, 높이, 방향: 가로, 방향: 세로, 해상도 및 기타.

미디어 기능에 사용되는 값을 라고도 합니다. 중단점(전환점 또는 제어점). 짐작한 대로 이러한 통제 지점에서 사이트 디자인이 변경됩니다.

• 320px- 이동하는
• 480px- 이동하는
• 768px- 태블릿
• 1024px- 태블릿, 넷북
• 1280px그리고 더 - 개인용 컴퓨터.

제어점은 레이아웃이 눈에 띄게 깨지거나 올바르게 표시되지 않거나 올바르게 표시되지 않는 값의 다른 매개변수를 사용하여 생성될 수 있으므로 특정 화면 해상도와 엄격하게 연결되지 않을 수 있습니다.

미디어 쿼리에는 다음과 같은 논리 연산자도 사용됩니다.

• 그리고– 여러 조건을 결합하는 데 사용되는 논리 AND(예: @media print 및 (color) ( ... )).
• ~ 아니다– 조건을 부정하는 데 사용되는 논리적 NOT(예: @media not all 및 (color) ( … )).
• 오직– 미디어 쿼리를 지원하지 않는 이전 브라우저에 사용됩니다(예: @media 전용 화면 및 (최대 너비: 1300px) ( … )).

미디어 쿼리는 모든 기본 CSS 스타일 뒤, 스타일 파일 끝에 작성됩니다.

고정 레이아웃에서 반응형 웹사이트 디자인을 만드는 방법

따라서, 유지하고 반응형 레이아웃으로 바꾸고 싶은 고정된 크기의 작동하는 웹 사이트 테마가 있지만 어디서부터 시작해야 할지 모른다고 가정해 보겠습니다. 다음으로, 이것이 어떻게 이루어질 수 있는지, 그것이 가능한지, 무엇을 해야 하는지, 어디서부터 시작해야 하는지 알려드리겠습니다.

1. 만일을 대비해 우선 템플릿(테마)의 백업본을 만들어둡니다.
2. 다음으로 CSS 편집을 위한 프로그램이 필요합니다. 예를 들어 무료인 Adobe의 대괄호나 Notepad++와 같은 코드 편집기일 수 있습니다.
3. 또한 코드 검사기(F12 키로 호출)가 있는 Google 크롬 브라우저도 있습니다.

다음으로 편집을 시작하겠습니다. 편의를 위해 템플릿을 Denver(로컬 서버) 또는 하위 도메인 중 더 편리한 곳으로 전송할 수 있으므로 사용자는 레이아웃에 발생하는 모든 편집 내용을 볼 수 없습니다. 우선 뷰포트 메타 태그를 추가해 보도록 하겠습니다. 위에 추천 형식으로 적어두었습니다.
다음으로 모든 정적 측정 단위를 상대 측정 단위로 변환해야 합니다.

이것은 px입니다. %로 변환하고 글꼴을 em으로 설정해야 합니다. 이는 주로 너비와 글꼴과 관련이 있습니다.

메인 컨테이너 래퍼의 너비(max-width: 960px;)는 변경하지 않고 그대로 두고, 너비를 기록한 경우에는 max-width로 변경합니다. 나머지 컨테이너의 경우 너비를 % 비율로 변경합니다. 다음 공식을 사용하여 번역하겠습니다.

컨테이너 크기(px) / 주 컨테이너(부모)의 크기(px) * 100% = 결과(%)

예를 들어 정적 사이트 본문 컨테이너는 720px이고 기본 컨테이너(상위 컨테이너)의 크기입니다(예: 표준 960px). 그러면 다음과 같은 720/960*100=75% 를 얻습니다.

따라서 우리는 정적 레이아웃을 유동적인 레이아웃으로 변환할 것입니다. 다음으로, 글꼴이 있는 경우 번역하겠습니다. px V 여자 이름이를 위해 다음 공식을 다시 사용합니다.

글꼴 크기(px) /16px(표준 크기) = 글꼴 크기(em)

예를 들어 글꼴 크기가 32px이면 32/16=2em입니다.
그런 다음 이미지를 적응형으로 만듭니다. 이를 위해 CSS에 다음과 같은 속성과 값을 작성하겠습니다.

Img(최대 너비:100%; 높이: 자동; )

이 방법은 이미지를 잘 적용하지만, 유일한 단점은 이미지의 무게를 줄이지 않는다는 것입니다. 즉, 무게가 큰 이미지가 모바일 장치에 로드된다는 의미입니다. 이를 방지하려면 화면 크기에 따라 다른 이미지를 로드해야 합니다.

이러한 모든 변경 작업을 수행한 후 모든 작업을 올바르게 수행했다면 사이트에는 아무 것도 변경되지 않지만 브라우저 창을 더 작게 만들려고 하면 디자인과 이미지가 축소됩니다.

자, 기초가 준비되었습니다. 이제 레이아웃을 재구성할 제어점을 결정하고, 블록이 어떻게 작동할지, 무엇을 숨길지 생각하고, 이를 모두 미디어 쿼리에 기록해야 합니다. 우리는 Google Chrome 브라우저를 사용하여 이러한 전환점을 결정할 것입니다.

레이아웃을 열고 키를 누르세요. F12브라우저 창의 크기를 줄이겠습니다. 오른쪽 상단에 창의 크기를 기록합니다. 첫 번째 값은 너비를 나타냅니다. 디자인이 더 이상 올바르게 표시되지 않을 때까지 압축해야 합니다. 레이아웃이 올바르지 않게 보이는 크기에서는 제어점을 만듭니다.
첫 번째 전환점을 결정한 후 모든 주요 스타일 뒤에 있는 style.css 파일에 이를 작성합니다. 레이아웃에 왼쪽 사이드바와 공지 사항이 포함된 콘텐츠 부분이 있고 910px에서 사이트가 잘못 표시되기 시작한다고 가정해 보겠습니다. 이 경우 다음과 같은 미디어 쿼리를 작성하겠습니다.

@media 전용 화면 및 (max-width: 910px)( /* 콘텐츠 부분을 전체 너비로 만들고 정렬을 취소합니다. */ 섹션( width: 100%; float: none; ) /* 사이드바도 전체 너비로 만듭니다. 정렬 취소*/ 따로( width: 100%; float: none; ) )

이러한 블록에 여백(여백, 패딩)이 있는 경우 너비를 쓸 때 0으로 재설정하거나 고려해야 합니다. 예: 패딩: 2%;그러면 너비는 다음과 같이 기록됩니다 너비: 96%;.

따라서 우리는 레이아웃을 910px 미만의 해상도로 조정했습니다. 브라우저 창이 910px보다 작으면 콘텐츠가 전체 너비가 되고, 사이드바도 콘텐츠 부분 아래로 이동하여 전체 너비가 됩니다.

동일한 원리를 사용하여 다른 제어점을 만들고, 레이아웃이 깨지는(올바르지 않게 보이는) 너비를 찾고, 미디어 요청을 기록하고, 이에 대한 스타일을 만들고, 블록 너비를 설정하고, 덜 중요한 블록을 숨길 수 있습니다( 디스플레이: 없음).

아시다시피, 이 예에서 제어점은 화면 크기에 엄격하게 연결되지 않으므로 해상도에 관계없이 다양한 장치에서 사이트의 양호한 표시가 보장됩니다.

열심히 노력해야 하지만 결과는 오래 걸리지 않으며 고정된 레이아웃에서 적응형 웹 사이트 디자인을 독립적으로 만들 수 있습니다.

글쎄, 이것이 내가 이 기사에서 말하고 싶었던 전부인 것 같습니다. 적응형 디자인에 대해 조금 쓰고 싶었지만 꽤 광범위한 것으로 판명되었습니다. 이 자료가 여러분에게 도움이 되기를 바랍니다.

인터넷 사용자는 화면 크기가 다른 다양한 장치에서 웹사이트를 탐색합니다. 화면 크기는 끊임없이 변화하므로 사이트가 이에 적응하는 것이 중요합니다. 다양한 유형의 장치에 쉽게 적응하는 웹 사이트를 만드는 데는 두 가지 주요 접근 방식이 있습니다.

반응형 디자인(RWD)- 반응형 디자인 - 특정 속성 값을 사용하여 사이트를 디자인합니다(예: 하나의 레이아웃이 다른 장치에서 작동할 수 있도록 하는 유연한 레이아웃 그리드).

적응형 설계(AWD)— 적응형 디자인 또는 동적 디스플레이 — 여러 고정 너비 레이아웃을 기반으로 장치에 따라 변경되는 조건으로 사이트를 디자인합니다.

1. 반응형 디자인 기법

반응형 웹 디자인의 철학은 화면 크기에 관계없이 모든 기기에서 사이트를 쉽게 볼 수 있도록 만드는 것입니다. 구절 반응형 디자인 2011년 Ethan Marcotte가 발명했습니다. 반응형 웹 디자인의 주요 특징은 유동 그리드로 인해 레이아웃이 화면 크기의 변화, 풍선처럼 부풀거나 수축하는 것에 자동으로 반응한다는 것입니다.

반응형 디자인(영어) 반응형 웹 디자인) 세 가지 방법을 결합합니다 - 유연한 레이아웃메쉬 기반, 유연한 이미지그리고 미디어 쿼리.

레이아웃 유연성고정된 픽셀 값 대신 상대적인 측정 단위를 사용하므로 사용 가능한 공간에 따라 너비를 조정할 수 있습니다.

텍스트 콘텐츠의 유연성이는 브라우저의 기본 글꼴 크기인 16px를 기준으로 글꼴 크기를 계산하여 달성됩니다. 예를 들어 고정 크기 글꼴 크기: 42px의 경우 상대 크기는 42px / 16px = 2.625em입니다.

문제 유연한 이미지사이트의 모든 이미지에 대해 img 규칙(너비: 100%; 최대 너비: 100%;)을 사용하여 해결되었습니다. 이 규칙은 이미지가 컨테이너보다 넓지 않고 더 큰 화면에서 실제 크기를 초과하지 않도록 보장합니다.

미디어 쿼리화면 유형, 너비, 높이, 방향, 해상도 등 콘텐츠 표시와 관련된 장치 특성에 따라 스타일을 변경합니다. 미디어 쿼리는 각 화면 크기에 적절한 스타일을 적용하는 반응형 디자인을 만듭니다.

쌀. 1. 반응형 디자인

추가 반응형 디자인 기법

확장 가능한 벡터 그래픽- 품질 저하 없이 어떤 크기로든 확장되고 Retina 디스플레이에서 보기 좋게 보이는 SVG 이미지를 사용하세요.

카드 인터페이스- 콘텐츠의 컨테이너를 나타내는 둥근 모서리가 있는 직사각형 모양인 소위 카드 인터페이스를 사용합니다. 이러한 블록은 독립형 인터페이스 장치이며 레이아웃 내에서 쉽게 이동할 수 있습니다.

쌀. 2. Pinterest, 카드 기반 레이아웃

꼭 필요한 것만 남겨두세요- 특히 반응형 디자인에 좋은 기술입니다. 요즘 점점 인기를 얻고 있는 반응성이 뛰어나고 친근한 미니멀리스트 인터페이스를 만들어보세요.

쌀. 3. 호텔룩, 웹 디자인의 미니멀리즘

콘텐츠의 우선순위를 올바르게 지정하고 숨깁니다.- 특히 화면이 작은 장치의 경우 숨겨진 컨트롤을 사용하세요. 팝업 창, 탭, 캔버스 외부 메뉴 및 기타 유사한 기술은 페이지의 요소 수를 줄이는 데 도움이 됩니다. 불필요한 요소로부터 공간을 확보함으로써 인터페이스를 편리하고 사용자 친화적으로 만들 수 있습니다.

버튼을 클릭할 수 있는 넓은 공간 만들기— 버튼의 활성 영역이 클수록 사용자가 버튼과 상호 작용하기가 더 쉬워집니다.

인터페이스에 상호작용성을 추가하세요- 사용자 작업에 대한 응답으로 응답 작업(데스크톱 장치에서 요소 위에 마우스를 올리거나 모바일 장치에서 요소를 터치할 때 작동하는 애니메이션)을 만듭니다.

2. 뷰포트 메타 태그를 사용하여 뷰포트 사용자 정의

Android 및 iOS 운영 체제용 모바일 브라우저가 사이트 페이지 크기를 자동으로 조정하지 못하도록 특수 태그가 사용됩니다. name="viewport" 속성을 사용합니다. 이 태그를 사용하면 너비 및 초기 크기 매개변수에 대한 특정 값을 설정할 수 있습니다.

—initial-scale=1은 브라우저의 페이지 크기가 뷰포트 크기의 100%와 동일함을 의미합니다. 즉, 물리적 픽셀과 CSS 픽셀 간의 비율은 1:1이 됩니다.

— width=device-width는 페이지 너비가 모든 브라우저 창 너비의 100%와 동일함을 의미합니다. 즉, 사이트 페이지의 너비가 기기의 너비와 일치하므로 크기를 조정할 필요가 없습니다.

이 예에서 브라우저 창의 콘텐츠는 실제 크기에 비해 2배 더 커집니다.

태그도 추가 사용자가 페이지 너비를 얼마나 늘리거나 줄일 수 있는지 제어하는 ​​데 사용할 수 있습니다.

이 코드를 사용하면 페이지 너비를 장치 화면 너비의 3배에 해당하는 값으로 늘리고 장치 화면 너비의 절반으로 줄일 수 있습니다.

user-scalable 속성을 사용하여 사용자의 확장 기능을 거부할 수 있습니다.

3. 범용 템플릿

반응형 웹 디자인을 만드는 데 사용되는 대부분의 레이아웃은 Luke Wroblewski가 정의한 5가지 패턴 범주 중 하나에 속합니다.
대부분 유동적(가장 고무 같은)
컬럼 드롭(서로 아래에 있는 열),
레이아웃 쉬프터(레이아웃 이동),
작은 조정(작은 변화)
오프 캔버스(화면 꺼짐).
어떤 경우에는 페이지에서 Column Drop 및 Off Canvas와 같은 템플릿 조합을 사용할 수 있습니다.

3.1. 대부분 유동적

고무 메쉬를 중심으로 구성된 인기 레이아웃입니다. 대형 또는 중간 너비 화면에서는 일반적으로 크기가 변경되지 않고 여백만 조정됩니다. 작은 화면에서는 고무 그리드로 인해 기본 콘텐츠에 대한 레이아웃이 다시 계산되고 열이 서로 아래에 배치됩니다. 템플릿의 장점은 작은 화면과 큰 화면 사이에 하나의 제어점만 필요하다는 것입니다.

3.2. 컬럼 드롭

창 너비가 모든 내용을 표시할 수 없는 경우 열은 수직으로 하나씩 배치됩니다. 결과적으로 열은 수직으로 서로 아래에 배치됩니다. 이 레이아웃 템플릿의 중단점 선택은 콘텐츠에 따라 다르며 각 디자인 옵션에 대해 별도로 결정됩니다.

3.3. 레이아웃 쉬프터

다양한 너비의 화면에 대해 여러 제어점을 제공하므로 반응성이 가장 뛰어난 템플릿입니다. 이 레이아웃의 주요 차이점은 렌더 트리를 다시 계산하고 열을 서로 아래에 배치하는 대신 콘텐츠가 이동된다는 것입니다. 주요 중단점 사이의 상당한 차이로 인해 이 레이아웃을 유지하는 것이 더 어렵고 콘텐츠의 전체 레이아웃뿐만 아니라 해당 요소도 변경해야 할 수도 있습니다.

3.4. 작은 조정

템플릿은 글꼴 크기 조정, 이미지 크기 조정, 콘텐츠 이동 등 레이아웃을 약간 변경합니다. 단일 페이지 사이트 및 텍스트가 많은 기사와 같은 단일 열 레이아웃에서 잘 작동합니다.

3.5. 오프 캔버스

탐색 요소나 애플리케이션 메뉴 등 거의 사용되지 않는 콘텐츠는 화면 외부에 배치되며 화면 크기가 허용하는 경우에만 표시됩니다. 작은 화면에서는 단 한 번의 클릭으로 콘텐츠가 열립니다.

4. 반응형 디자인

반응형 디자인과 달리 적응형 디자인(적응형 웹 디자인)은 장치 크기에 중점을 둡니다. 제어(중단) 지점을 기반으로 다양한 유형의 장치(모바일 장치, 태블릿, 데스크톱 컴퓨터)에 대해 여러 가지 정적 레이아웃을 사용합니다. 즉, 레이아웃은 특정 장치 브라우저 창 크기에서 로드되며 레이아웃 간 전환은 원활하지 않고 갑자기 발생합니다.

일반적으로 반응형 레이아웃에는 화면 너비에 따라 6가지 레이아웃 옵션이 있습니다.
320
480
760
960
1200
1600.

반응형 레이아웃은 기능에 중점을 둡니다. 즉, 디자인에서는 모바일 장치의 터치 컨트롤이나 데스크톱 모니터의 넓은 공간과 같은 장치 기능을 고려합니다.

기본 반응형 디자인 기법

일관성을 유지하세요— 모든 사이트는 사용자가 탐색하고 상호 작용할 때 편안함을 느낄 수 있도록 사용자와 신뢰 관계를 형성해야 합니다. 일관된 디자인은 사이트의 다른 페이지로 이동할 때 사용자가 다른 사이트에 있는 것처럼 느끼지 않는다는 것을 의미합니다. 작은 세부사항에 주의를 기울이고, 시각적 계층 구조를 구축하고, 중요한 요소를 굵게 강조하세요. 동일한 팝업 알림 디자인과 같이 다양한 상황에 동일한 요소를 재사용하여 사이트 전체에서 일관된 색상 구성표를 사용하십시오.

그리드 사용— 열 너비와 열 사이의 패딩을 제어하려면 12열 구조가 더 바람직합니다.

5. 반응형 웹 디자인과 적응형 웹 디자인의 차이점은 무엇입니까?

쌀. 4. 다양한 기기에 대한 반응형 및 적응형 디자인

반응형 레이아웃을 만들려면 미디어 쿼리와 %로 지정된 그리드 요소의 상대적 크기를 사용합니다. 반응형 디자인에서 서버 측 스크립트는 먼저 사용자가 사이트에 액세스하려고 하는 장치 유형(데스크톱, 휴대폰 또는 태블릿)을 확인한 다음 가장 최적화된 페이지 버전을 정확하게 로드합니다. 그리드 요소에는 고정된 픽셀 크기가 제공됩니다.

따라서 이러한 기술 간의 주요 차이점은 반응형 디자인(모든 장치에 대한 하나의 레이아웃)과 적응형 디자인(각 장치 유형에 대한 하나의 레이아웃)입니다.

6. 유용한 서비스 및 도구

Windows, Linux 및 Mac OS X용 Android 에뮬레이터. iOS 시뮬레이터는 Mac OS X 사용자만 사용할 수 있으며 Xcode 패키지의 일부입니다(Mac App Store에서 무료로 다운로드 가능).

모든 웹사이트에서 실행되는 PHP 스크립트는 화면 크기를 감지하고 이에 맞게 이미지 크기를 조정하므로 작은 화면에서는 이미지 크기가 작아집니다.

장치의 물리적 크기와 높이 및 너비에 대한 CSS 값, 모바일 장치의 픽셀 비율 값 간의 대응 표입니다.

미디어 쿼리와 반응형 웹 디자인을 사용하는 웹사이트 모음입니다.

12열 레이아웃을 기반으로 하는 CSS 프레임워크, 최대 960px. Chrome, Safari, Firefox, IE 7 이상, 모바일 버전의 브라우저에서 지원됩니다.

웹 애플리케이션 개발을 위한 도구 세트입니다. LESS 언어, 12열 적응형 레이아웃, 모바일 장치, 태블릿 및 모니터 지원, 다양한 구성 요소, 버튼, 드롭다운 메뉴, 입력 필드의 사용자 정의 스타일, 목록, 제목, 레이블, 아이콘, 경고, 탭, 진행률 표시줄, 도구 설명 , “accordion”, “carousel” 등 다양한 Javascript 플러그인, 이미 생성된 HTML에 Bootstrap 스타일 적용을 포함한 스캐폴딩 지원.

2015년 4월 21일부터 Google 검색 엔진과 2016년 2월 2일부터 Yandex는 인터넷 사용자에게 검색어용 페이지를 발행하는 규칙을 변경했습니다.

이제 모바일 장치에서 인터넷을 사용하는 사람들을 위해 반응형 사이트가 검색 엔진 상위 순위, 즉 모바일 장치에서 가장 편리하게 볼 수 있는 사이트에 먼저 표시됩니다.

검색 엔진 규칙의 혁신으로 인해 인터넷에서 리소스의 관련성을 높이기 위해 사이트는 이제 적응형 디자인을 지원해야 합니다. 사이트를 약간 다시 실행하면 됩니다. :)

반응형 웹사이트가 어떻게 작동하는지 이해하기 위해 적응형 웹사이트를 만들 가장 간단한 템플릿을 만들어 보겠습니다.

/* 래퍼 끝 */

#wrapper - 전체 템플릿을 통합하는 사이트의 프레임워크는 닫는 태그 앞에 위치합니다.

.

#header는 래퍼 앞이나 뒤에 위치할 수 있는 사이트 헤더입니다.

#헤더 h1 - 로고.

#content - 블록 요소 역할을 하며 colLeft와 colRight를 결합합니다.

#colRight - 사이드바.

#colLeft - 콘텐츠를 위한 공간입니다.

#footer - 사이트 바닥글입니다.

header, colLeft, colRight, footer 등 모든 요소는 서로 독립적이어야 합니다. "태그" 게임처럼 이동하고 교체할 수 있습니다. 그리고 이 모든 것은 사이트를 볼 모바일 장치(디스플레이 크기)에 따라 달라집니다. 이 특정 템플릿을 염두에 두고 있지는 않습니다. 이 템플릿은 가장 간단하고 여기서 할 수 있는 일이 많지 않습니다. 하나 또는 두 개의 추가 열, 추가 가로 메뉴 등이 포함된 기타 적응형 템플릿(나중에 자세히 설명)

개인용 컴퓨터 모니터에서 본 것처럼 다음과 같은 일이 일어났습니다.

화면 크기가 줄어들면 사이트가 줄어들기 시작하고 텍스트도 작아져 읽기 어려워집니다.

뷰포트 메타 태그

작은 화면에서 텍스트가 태그 사이의 크기로 유지되도록 뷰포트 메타 태그를 추가해야 합니다.

텍스트를 명확하게 읽을 수 있지만 두 블록이 디스플레이에 수평으로 맞지 않기 때문에 수평 스크롤 막대가 나타납니다.

그리고 이것은 아름답지도 않고 사용자 친화적이지도 않습니다!

적응형 웹사이트 디자인 미디어 화면

확장자가 다른 모바일 기기에서 웹사이트를 정상적으로 표시하려면 미디어 스크린 미디어 쿼리를 사용하세요. 조금 더 높게는 "태그" 플레이에 대해 이야기했습니다. 따라서 미디어 화면의 도움으로 모바일 장치의 모든 화면에 적합한 적응형 디자인이 만들어집니다. 사이트의 요소는 왼쪽에서 오른쪽으로, 위에서 아래로, 그리고 어딘가에서 확대하거나 축소할 수 있습니다. 각 모바일 장치에 맞게 자신만의 적응형 웹사이트 디자인을 만들 수 있습니다.

이 예에서는 미디어 화면을 사용하여 사이트바가 올바르게 배치되지 않았으므로 콘텐츠 아래로 낮추겠습니다. 우리는 이 확장에 대해서뿐만 아니라 240px에서 375px까지의 확장자를 가진 모바일 장치에 대해서도 이 작업을 수행할 것입니다. 즉, 화면 해상도가 375px보다 큰 휴대폰에서는 사이트바가 더 이상 다운되지 않습니다.

@media 화면 및 (최소 너비:240px) 및 (최대 너비:375px)

#바닥글(
배경: #F0DA0E;
너비: 100%;
최대 너비: 1000px;
높이: 90px;
여백: 0 자동;
명확함: 둘 다;
}

#머리글 (
글꼴 크기: 0.7em;
}
#래퍼 #colLeft(
플로트:없음;
너비:100%;
여백 오른쪽:0px;
}
#래퍼 #colRight(
여백-왼쪽:0px;
여백 상단:25px;
플로트:없음;
너비:100%;
}

이 미디어 쿼리는 화면이 375px 이하인 모바일 장치에 대한 규칙을 지정합니다.

#header - 사이트 헤더에서 로고 크기를 줄였습니다. 확장자가 작으면 맞지 않을 수 있기 때문입니다.

#wrapper #colLeft - 왼쪽 정렬을 취소했습니다. float:none, 콘텐츠 너비를 전체 화면 너비:100%로 설정하고 사이드바를 콘텐츠 아래에 놓았습니다.

#wrapper #colRight - 콘텐츠 여백에서 사이드바 들여쓰기를 만들었습니다. 상단:25px, 너비: 전체 화면에서 사이트바 너비의 100%입니다.

@media 화면 및 (최소 너비:376px) 및 (최대 너비:768px)

@media 화면 및 (최소 너비:376px) 및 (최대 너비:768px) (

#래퍼 #colLeft(
플로트:없음;
너비:100%;
여백 오른쪽:0px;
}
#래퍼 #colRight(
여백-왼쪽:0px;
여백 상단:25px;
플로트:없음;
너비:100%;
}
}

@media 화면 및 (최소 너비:240px) 및 (최대 너비:375px) (

#머리글 (
글꼴 크기: 0.7em;
}
#래퍼 #colLeft(
플로트:없음;
너비:100%;
여백 오른쪽:0px;
}
#래퍼 #colRight(
여백-왼쪽:0px;
여백 상단:25px;
플로트:없음;
너비:100%;
}
}

장치에 대한 요소와 글꼴 크기를 정확하게 조정하여 인기가 있거나 별로 인기가 없는 확장 각각에 대해 별도로 규칙을 만드는 것이 더 편리해 보입니다.

@media 화면 및 (최대 너비: 768px)
@media 화면 및 (최대 너비: 640px)
@media 화면 및 (최대 너비: 375px)
...

하지만 이것이 다음과 같은 확장된 미디어 쿼리를 의미하는 것은 아닙니다. 및 (최소 너비:376px) 및 (최대 너비:768px), 무시해야 합니다. 예를 들어 숨길 것이 없거나 화면 크기를 변경할 때 별도로 무언가를 줄이는 CSS에서는 확장된 확장으로 충분합니다.

반응형 웹사이트를 테스트할 수 있는 곳

다양한 화면으로 다양한 모바일 기기에서 어떻게 보이는지 확인해보세요. 매우 편리합니다. quirktools.com또는 브라우저에서 직접. 웹사이트를 열고 마우스 오른쪽 버튼을 클릭한 후 > 코드 보기를 클릭하고 화면 크기를 조정하는 도구를 찾으세요. Google Chrome 및 Yandex 브라우저에서는 상단 중앙에 있습니다.

가장 간단한 반응형 웹사이트를 만드는 것은 그리 어렵지 않았습니다. :) 물론 이것이 전부는 아닙니다. 미디어 쿼리만으로도 다양한 확장을 위해 작성되고 작성될 수 있습니다. 목표는 적응형 웹사이트를 구축하는 메커니즘 자체를 설명하는 것이었습니다.