적응형 레이아웃을 위한 스타일. 적응형 레이아웃: 수업을 받을 것인가, 아니면 바로 전투에 들어갈 것인가? 적응형 레이아웃을 익히기가 어렵나요?
귀하의 사이트 레이아웃이 iPhone이나 태블릿에서 보기 좋게 보이려면 이러한 장치에 맞게 조정되어야 하며 효율적으로 수행하는 것이 중요합니다...
적응형 웹 사이트 레이아웃(모바일 친화적이라고도 함) - 강의에서와 같이 단계별로 자세히 설명되어 있습니다.
참고: Yandex와 Google에는 사이트의 적응성을 확인할 수 있는 자체 도구가 있습니다. Yandex Webmaster의 새 버전에서는 도구 - 모바일 페이지 확인과 같은 위치에 있습니다.
반응형 웹 사이트 디자인을 만드는 방법을 알고 싶다면 아래에 예제에 자세히 설명되어 있지만 CSS 작업 기술이 없으면 더 어려울 것입니다. 아니면 프로그래머나 웹마스터가 이를 수행할 수도 있습니다.
반응형 웹사이트 디자인 - 페이지 창의 너비와 열 및 사이드바의 너비(%), 적응형(픽셀) 설정이 포함됩니다.
참고: 귀하의 사이트에 WordPress와 같은 인기 있는 엔진이 있는 경우 적응형 디자인으로 인한 "두려움"이 없습니다. 몇 번의 마우스 클릭만으로 모든 작업이 완료됩니다. 플러그인은 간단히 설치 및 활성화되며, 모두). 예를 들어 WP의 경우 WPtouch를 사용했습니다. 매우 좋지만 풀 타임 프로그래머가 있다면 이 순간을 개별적으로 수행하는 것이 좋습니다.
기본적으로 적응형 레이아웃에서는 width(요소의 너비: 최대 너비 및 최소 너비), float(래핑, 창 너비가 감소함에 따라 제거됨), 글꼴 등이 자주 조작된다는 점을 이해해야 합니다. -size(글자의 높이가 변경됨)
1) 먼저 다양한 유형의 장치에 대한 특수 메타 태그를 작성해야 합니다.
2) 적응형 페이지 매개변수(너비 및 높이):
컨테이너(
너비: 800px
최대 너비: 90%;
}
이 경우 고정된 컨테이너 너비가 설정되지만 창 너비의 90%를 넘지 않아야 하며 이는 매우 편리합니다. 그러면 사이트 자체가 창 크기에 맞게 조정됩니다.
3) 전체 사이트 이미지에 대한 CSS 적응형 레이아웃:
img(최대 너비: 100%;
높이: 자동;
}
여기서는 사진의 크기를 보여줍니다. 최대 너비는 눈의 100%를 넘지 않아야 합니다. 이렇게 하면 사진 자체가 휴대폰이나 기타 장치의 크기에 맞게 조정됩니다. 적응형 이미지 디자인이라는 간단한 방법이 있습니다.
4) 웹 사이트 텍스트의 적응형 레이아웃: 이 경우 글꼴 높이(글꼴 크기 및 기타 매개변수)를 사용하여 조작이 발생합니다.
Break-word ( word-wrap: break-word; )
이 CSS는 하이픈이 아닌 긴 단어가 있을 때 하이픈을 넣도록 설계되었습니다.
글꼴 크기에는 많은 오류가 있습니다. Yandex는 쓰기를 좋아합니다. - 텍스트 크기가 너무 작아 모바일 장치에서 읽을 수 없습니다. 이를 위해 다음을 수행합니다.
body (font-size: 16px) - 이렇게 하면 이 오류가 발생하지 않으며, p 태그와 링크의 경우 별도로 넣어야 합니다. 이 오류가 발생하는 것은 바로 body 태그에 글꼴 크기: 12 또는 14px이 포함되어 있기 때문입니다! 그리고 평결은 이렇습니다.
5) 3열 디자인 또는 2열 레이아웃 적용 - div에서 모든 작업이 완료되면 이에 대해 복잡한 것이 없습니다. 아, 그러면 일반적으로 래핑을 취소해야 합니다. 즉, float를 none으로 설정하면 블록이 이동합니다. 아래에.
6) 비디오용 적응형 CSS(Habr 제공):
동영상 (
위치: 상대;
패딩 바닥: 56.25% ;
높이: 0 ;
오버플로: 숨김;
) .video iframe ,
.video 객체
.비디오 삽입(
위치: 절대;
상단: 0 ;
왼쪽: 0 ;
너비: 100% ;
높이: 100% ;
}
적응형 디자인을 만들기 위해 미디어 쿼리가 자주 사용됩니다(화면 너비, 화면 해상도를 기준으로 규칙을 설정함).
다음은 샘플 미디어 쿼리입니다. 적응형 디자인에 사용할 해상도는 다음과 같습니다.
@media 전용 화면 및 (최대 너비: 1200px) (
@media 전용 화면 및 (최대 너비: 992px) (
/* 소형 장치, 태블릿 */
@media 전용 화면 및 (최대 너비: 768px) (
@media 전용 화면 및 (최대 너비: 480px) (
/* 사용자 정의, iPhone Retina */
@media 전용 화면 및 (최대 너비: 320px) (
/**/
}
/*========== 모바일 우선 방법 ===========*/
/* 사용자 정의, iPhone Retina */
@media 전용 화면 및 (최소 너비: 320px) (
/**/
}
/* 초소형 장치, 전화기 */
@media 전용 화면 및 (최소 너비: 480px) (
/**/
}
/* 소형 장치, 태블릿 */
@media 전용 화면 및 (최소 너비: 768px) (
/**/
}
/* 중형 장치, 데스크탑 */
@media 전용 화면 및 (최소 너비: 992px) (
/**/
}
/* 대형 장치, 와이드 스크린 */
@media 전용 화면 및 (최소 너비: 1200px) (
/**/
}
그러나 열과 블록의 너비를 백분율로 설정하여 미디어 쿼리를 피할 수도 있습니다.
미디어 쿼리의 경우 맨 위에서 시작합니다. 우리가 수행한 모든 작업은 최대 너비에 허용됩니다. 768은 480에서도 작동합니다.
모바일 장치에 웹사이트를 적용할 때 문제점은 무엇입니까?예를 들어 Yandex는 다음을 표시할 수 있습니다. 가로 스크롤이 있습니다.
패딩이나 여백이 있는 항목이 있습니다. 상위 선택자(블록)에 대해 0으로 재설정하면 만족스러울 것입니다.
마지막에 Yandex Webmaster는 다음을 보여줍니다.
저도 4시간동안 했는데 처음은 항상 어렵네요! 하지만 단 몇 시간이면 할 수 있어요! 그리고 이를 더 빠르게 만들기 위해 다시 확인하기 위해 웹마스터에게 보냅니다. 이는 SEO에 중요합니다.
일반적으로 오늘날 많은 사람들이 기성 템플릿을 사용합니다. 부트스트랩은 거의 고통이 없습니다.
우리는 소셜 미디어 콘텐츠 마케팅: 팔로어의 머리 속으로 들어가 브랜드와 사랑에 빠지게 만드는 방법이라는 새 책을 출시했습니다.
특히 이 기술은 디스플레이 크기가 다른 컴퓨터/노트북, 스마트폰/태블릿 등 다양한 유형의 장치에서 사이트가 동일하게 표시되도록 적극적으로 사용됩니다.
오늘날 반응형 웹사이트는 HTML5 마크업 언어와 CCS3 캐스케이딩 스타일 시트를 사용하여 만들어집니다. 그러나 해당 기술이 널리 사용되는 모든 브라우저에 표준이 될 때까지 해당 목적을 위해 JavaScript 프로그래밍 언어가 사용되었습니다. 2010년 이전에도 그들은 개발한 사이트가 다른 화면에 올바르게 표시되도록 하기 위해 동일한 페이지에 다른 마크업을 사용하여 여러 버전을 만들어야 했습니다.
적응형 페이지 레이아웃이 필요한 이유는 무엇입니까?비교적 최근까지만 해도 많은 웹사이트를 방문하면 페이지를 가로로 스크롤하는 슬라이더가 브라우저 하단에 표시되는 것을 볼 수 있었습니다. 예를 들어, 인터넷 브라우저 창이 전체 화면을 채우도록 최대화되지 않고 상대적으로 작은 영역을 차지하는 경우 이런 일이 발생했습니다. 이는 이미지가 표시되는 화면의 해상도가 800 x 600 또는 640 x 480 픽셀인 경우에도 거의 항상 볼 수 있습니다.
오늘날 모바일 장치 소유자조차도 이러한 문제를 거의 경험하지 않습니다. 그 이유는 최신 디스플레이의 해상도가 HD 이상일 뿐만 아니라 적응형 페이지 레이아웃이 이제 거의 표준이 되었기 때문입니다.
반응형 디자인은 왜, 언제 등장했나요?21세기의 두 번째 10년이 시작되면서 보편적인 웹 페이지의 개발을 가능하게 하는 기술을 개발해야 하는 절박한 필요성이 생겼습니다. 적응형 디자인의 생성과 개발을 촉발한 주요 전제 조건은 다음과 같습니다.
- 인터넷으로의 신규 사용자의 대규모 유입;
- 화면 해상도가 다른 많은 장치의 출현;
- 동일한 콘텐츠가 포함된 여러 버전의 페이지가 있는 사이트에 대해 제재를 가하기 시작한 검색 엔진의 압력.
처음 만든 사람은 공식적으로 웹 디자이너 Ethan Marcotte입니다. 2010년 중반에 그는 작업 공간 해상도가 다른 브라우저에서 웹 페이지가 정상적으로 표시되는 문제를 해결하는 기술에 대해 이야기하는 자료를 발표했습니다.
얼마 후, 또 다른 유명 팟캐스터가 그의 동료가 이야기한 개념에 추가 내용을 제안했습니다.
적응형 레이아웃은 무엇으로 어떻게 생성되나요?적응형 레이아웃을 만드는 방법에 대한 문제를 고려하기 전에 사용되는 주요 기술을 간략하게 고려할 필요가 있습니다. 이제 HTML5와 CSS3의 두 가지가 있습니다. 최근까지는 HTML4와 CSS2를 사용했는데, 이를 이용해 유니버설 디자인을 만들기 위해서는 자바스크립트도 사용해야 했습니다.
CSS3은 차세대 캐스케이딩 스타일 시트(Cascading Style Sheets)입니다. 이 기술은 사용자 브라우저에 페이지 요소를 표시하기 위한 규칙을 생성하기 위한 것입니다. 이를 사용하면 예를 들어 특정 사용자 화면 해상도에서 요소의 크기를 지정하거나 항상 특정 비율의 공간을 차지해야 한다는 규칙을 설정할 수 있습니다(100% - 화면의 전체 작업 영역을 채우는 것). 브라우저).
레이아웃 디자이너가 각 특정 해상도에 대해 별도의 클래스를 만들 수 있는 "미디어 쿼리" 규칙이 등장한 것은 3세대였습니다.
매우 중요한 포인트!
반응형 디자인에 CSS3를 사용하려는 사람은 CSS2와 달리 3세대 CSS(Cascading Style Sheets)가 개체 크기를 지정하기 위해 픽셀이 아닌 백분율을 사용한다는 점을 알아야 합니다.
HTML5의 경우 페이지를 직접 마크업하는 데 사용됩니다. 즉, 특정 요소가 배치되어야 하는 위치를 나타냅니다. 객체가 해상도에 적응할 수 있도록 CSS3를 사용하여 미리 생성된 클래스가 HTML 태그의 매개변수에 지정됩니다.
적응형 레이아웃의 간단한 예적응형 레이아웃이 무엇인지 이해하려면 예제가 최대한 단순해야 합니다. 따라서 준비된 이미지가 브라우저 작업 공간의 해상도에 맞게 자동으로 조정되는 옵션을 고려해 보겠습니다.
먼저 HTML을 사용하여 요소 자체를 페이지에 배치합니다.
DIV 태그는 그 안에 포함된 모든 것이 별도의 블록임을 나타냅니다. 페이지에 이러한 블록이 많으면 "class" 속성이 지정됩니다. 이는 브라우저가 특정 블록에 적용할 규칙을 이해하는 데 필요합니다.
이제 소위 말하는 규칙 자체를 만들어야 합니다.
CSS 컨테이너:
Div(너비: 100%; 텍스트 정렬: 중앙; ) div img(와이트: 100%; 높이: 자동; )
이 코드에서는 적응형 레이아웃에 대한 권한이 설정됩니다. 특히 너비는 항상 웹 브라우저 작업 영역 너비의 100%여야 하며 높이는 자동으로 조정된다고 명시되어 있습니다.
적응형 레이아웃 확인 중적응형 레이아웃을 확인하기 위한 특별한 도구가 있습니다. 예를 들어, GoogleChrome 브라우저에서는 "F12" 키를 누른 다음 열리는 패널에서 스마트폰 및 태블릿 이미지가 있는 아이콘을 클릭할 수 있습니다. 이 작업 후에는 관심 있는 해상도를 지정해야 하는 몇 가지 추가 패널이 나타납니다.
더욱 간단하게 만들 수 있습니다. 반응형 디자인이 작동하는지 확인하려면 CTRL을 누른 상태에서 “+” 또는 “-”를 클릭해야 합니다. 이 작업 후에 페이지는 그에 따라 증가하거나 감소해야 하지만 적응형 레이아웃이 적용되는 요소는 해당 비율의 비율을 유지합니다(또는 규칙에 지정된 다른 작업을 수행합니다).
반응형 디자인을 더욱 쉽게 만들어주는 도구적응형 디자인의 레이아웃은 다소 노동 집약적인 작업입니다. 따라서 이러한 모든 절차를 구현하는 시간을 줄이려면 특수 도구를 사용하는 것이 좋습니다. 그 중 하나는 잘 알려진 Bootstrap* 프레임워크라고 할 수 있습니다.
예를 들어 이 HTML 및 CSS용 툴킷에는 디자인에 사용할 수 있는 사전 구축된 클래스가 많이 포함되어 있습니다. 또한 모든 규칙과 표준에 따라 적응형 요소를 생성할 수 있는 동적 요소도 포함되어 있습니다.
이를 사용하려면 먼저 CSS3 및 HTML5 자체에 대한 직접 지식을 얻은 다음 프레임워크의 기능을 연구해야 합니다. 그러나 작업의 복잡성을 대부분 이해하면 적응형 웹 사이트 디자인 개발 시간을 크게 줄일 수 있습니다.
*Bootstrap은 Twitter Inc.에서 개발한 오픈 소스 소프트웨어입니다. 무료로 배포되며 언제든지 조언을 구할 수 있는 광범위한 커뮤니티가 있습니다.
HeavenWeb 블로그 독자 여러분께 인사드립니다. 오늘 블로그에서는 소위 적응형 레이아웃의 예를 제시하고, 또한 예를 들어 다양한 화면 해상도에 대한 적응성을 고려하여 간단한 레이아웃을 만드는 방법을 보여 드리겠습니다.
간단히 말해서 적응형 또는 "반응형" 레이아웃은 페이지가 열리는 장치 화면의 크기와 해상도에 적응하는 블록과 요소의 배열을 의미합니다.
태블릿 PC와 스마트폰의 인기가 높아짐에 따라 웹 마스터는 사이트 표시를 위한 새로운 형식을 지원해야 하며 이에 따라 이러한 사이트가 열리는 새로운 화면 해상도도 지원해야 합니다.
가장 중요한 값은 브라우저 창의 너비입니다. 가장 저렴한 스마트폰의 최소값은 240-360px이지만 대부분의 경우 여전히 480px 이상입니다. 이는 표준 1024픽셀 와이드 모니터 크기의 절반 이상입니다.
또 다른 중요한 포인트는 역시 잊어서는 안되는 대형 고해상도 모니터입니다. 웹마스터의 목표는 사이트를 해상도에 맞게 조정하고 모든 화면에서 가로 스크롤을 방지하는 것입니다.
이는 CSS 미디어 쿼리와 지정된 제한 내에서 최소 및 최대 너비와 높이를 제한하는 스타일 속성을 통해 달성할 수 있습니다.
하지만 예를 들어 모든 것을 보여주는 것이 좋습니다. 최소한의 요소로 간단한 적응형 레이아웃을 만들어 보겠습니다. 데모 페이지에서 완성된 예제의 모양을 볼 수 있습니다.
따라서 적응성에 대한 요구 사항은 다음과 같습니다.
- 주요 부분의 너비는 고해상도에서 늘려야 하지만, 줄이 너무 길면 읽기가 불편하기 때문에 일정량까지 늘려야 합니다.
- 브라우저 너비가 줄어들면 이미지가 영역 경계 내에 유지되도록 비례적으로 축소되어야 합니다.
- 너비가 700픽셀 미만(최소 - HD 화면이 세로 방향인 태블릿 또는 스마트폰)인 경우 하단의 세 블록이 차례로 정렬되어 기본 블록 너비의 100%를 차지해야 합니다.
- 또한 이 경우 왼쪽 사이드바가 좁은 스트립으로 축소되어 주요 부분을 위한 공간이 확보되어야 합니다.
- 이제 메인 블록 위에 위치해야 하는 사이드바를 열고 닫는 버튼을 팝업 메뉴 형태로 제공합니다.
의 시작하자. index.html 파일과 CSS 및 이미지 폴더를 만들었으며 여기에 레이아웃에서 잘라낸 스타일 파일과 그림을 각각 배치했습니다.
HTML 파일에서는 왼쪽 메뉴와 기본 부분에 대해 각각 left_side 및 .wrapper라는 두 개의 루트 컨테이너를 만듭니다. .left_side에는 로고, 소셜 링크 및 번호가 없는 메뉴 목록에 대한 일부 마크업을 배치합니다.
오른쪽 메인 블록에서는 각 게시물을 .text_block 클래스의 div로 래핑하고 Yandex 추상 도구의 자리 표시자 텍스트와 이미지 등을 추가합니다.
맨 아래에 3개의 .footer_block 블록을 추가하고 공통 .footer로 래핑해 보겠습니다. 기사에 제목 H2, H3을 추가하면 다음과 유사한 마크업이 표시됩니다.
적응형 레이아웃 레이아웃의 예입니다. Heaven Web - 웹 마스터를 위한 블로그입니다. 
웹 개발에 관한 블로그
- 집
- 공들여 나열한 것
- 제이쿼리
- 드루팔
- 다른
- 콘택트 렌즈
다음은 Yandex 초록의 텍스트입니다...
사진과 함께 추가 텍스트
첫 번째 제목
동시에 브랜드 구축에서는 이전 미디어 캠페인의 결과를 고려하여 승화된 설문조사를 구성합니다.
두 번째 제목
Maslow의 피라미드 구조를 바탕으로 영업 리더십은 인식의 원칙을 합리화하여 시장 점유율을 확보합니다.
세 번째 타이틀
위와 같이 생활 수준을 높이면 비용에 관계없이 이미지 형성이 발전합니다.
6번째 줄을 주목하세요. 사실 모바일 장치는 편리한 보기를 위해 웹 페이지 크기를 조정하지만 이것이 필요하지는 않습니다. 이 메타 항목을 사용하면 페이지 크기 조정이 금지됩니다.
이제 CSS 스타일로 넘어가겠습니다. 왼쪽 블록을 만들어 보겠습니다.
Left_side( 배경: #1d282b; 너비: 300px; 위치: 고정; 왼쪽: 0; 위쪽: 0; 높이: 100%; z-색인: 5; ) .logo_text( 패딩: 20px 10px; 색상:#ffffff; 글꼴- 크기: 24px; 줄 높이: 30px; 글꼴 무게: 일반; 글꼴 계열: myPTNarrow; 텍스트 정렬: 센터; ) .logo_text a( 디스플레이: inline-block; ) .logo_text 범위( 색상:#72898f; 글꼴 -size: 18px; line-height: 24px; padding: 0 10px 18px; text-align: center; 디스플레이: 블록; ) .left_menu( margin-top: 30px; ) .left_menu ul( 디스플레이: 블록; 목록 스타일- 유형: 없음; ) .left_menu li( 디스플레이: 블록; 높이: 30px; 줄 높이: 30px; ) .left_menu li a( 디스플레이: 블록; 줄 높이: 30px; 글꼴 크기: 18px; 글꼴 계열: myPTNarrow ; 색상:#ffffff; 텍스트 장식: 없음; 왼쪽 패딩: 60px; ) .left_menu li a:hover( 배경: #343e41; ) .social_img( 텍스트 정렬: center; ) .social_img a( 디스플레이: 인라인- 블록; 여백: 0 10px; 너비: 30px; 높이: 30px; 오버플로: 숨김; ) .social_img a:hover( 불투명도: 0.7; ) .tw_icon( 배경: url("../images/social.png") 상단 반복하지 않음; ) .go_icon( background: url("../images/social.png") 오른쪽 상단 no-repeat; ) .left_swap( display: none;/* 기본적으로 블록은 표시되지 않으며 미디어 쿼리가 있는 경우 표시됩니다. 트리거됨 */ 위치: 고정; 너비: 50px; 왼쪽: 0; 위쪽: 0; 높이: 100%; z-index: 6; 배경: url(../images/swipe.png) #1d282b 중앙 20px no- 반복하다; )
여기서는 Container.left_side에 대해 position:fixed를 지정했습니다. 이 속성을 사용하면 블록이 항상 왼쪽에 유지되고(왼쪽: 0, 위쪽: 0, 높이: 100%; 덕분에) 기본 콘텐츠와 함께 스크롤되지 않습니다. 블록이 어떤 것과도 겹치지 않도록 하려면 z-index: 5를 추가하세요.
왼쪽 블록의 너비가 300픽셀이므로 중앙 블록(.wrapper)에는 왼쪽 가장자리부터 내부 패딩(왼쪽 패딩: 300픽셀)이 있어야 왼쪽 메뉴 아래로 "떨어지지" 않습니다.
중앙 블록의 일반 코드:
래퍼(위치: 상대; 배경: #ffffff; 최소 높이: 200%; 최소 너비: 400px; 최대 너비: 1200px; 왼쪽 패딩: 300px; 오른쪽 패딩: 0px; 상자 그림자: 0 0 10px rgba (0,0,0,0.2); ) .wrapper a( 색상:#576a6f; ) .wrapper a:hover( 색상:#1d282b; ) .text_block( 오버플로: 숨겨진; 색상:#4a4a4a; 글꼴 크기: 18px ; 줄 높이: 24px; 최소 높이: 200px; 배경: url("../images/hr.png") 왼쪽 하단 반복-x; 패딩: 10px 40px 10px; ) p( 여백-하단: 24px; ) .cent_img( 디스플레이: 블록; 여백: 0 자동 40px; ) .auto_img( 디스플레이: 블록; 최대 너비: 100%; 여백: 0 자동 24px; )
여기서 가장 중요한 것은 이 블록의 너비 디자인입니다. .wrapper의 경우 속성을 지정합니다.
최소 너비: 480px; 최대 너비: 1200px;
즉, 화면 너비가 증가하면 블록이 콘텐츠와 함께 1200픽셀로 확장된 다음 왼쪽에 남아 있고 오른쪽에는 배경만 남게 됩니다. 줄이면 400px로 줄어들고, 세게 줄이면 가로스크롤이 나타납니다.
중앙 블록 내부의 이미지에는 .auto_img 클래스가 있어야 합니다. 너비가 맞지 않으면 비례적으로 줄어들어 컨테이너 너비의 100%와 같습니다.
다음으로 CSS 미디어 쿼리를 살펴보겠습니다. 이러한 모든 요청은 다음과 같습니다. 먼저 @media 헤더가 나오고 이 요청의 CSS 코드를 적용하려는 장치 유형이 표시됩니다. 일반 컬러 화면의 경우 이는 화면이라는 단어입니다(또는 모든 장치에 대해 모두 쓰는 경우가 더 많습니다). 조건과 매개변수는 괄호 안에 지정됩니다.
지금 우리가 관심을 갖는 것은 브라우저의 최대 너비가 콜론 뒤에 지정된 특정 값보다 작은 경우에만 후속 규칙이 적용되도록 지정하는 max-device-width 조건입니다.
즉, 조건 중 하나는 다음과 같습니다.
@미디어 화면 및 (최대 너비:800px)( .left_side( display: none; ) .left_swap( display: block; ) .wrapper( padding-left: 50px; ) )
중괄호 안에 필요한 CSS 규칙을 이미 넣었습니다. 즉, 왼쪽 메뉴를 숨기고 이전에 숨겨진 보조 좁은 왼쪽 블록인 .left_swap을 표시합니다.
아래쪽 가로 블록을 세로 행으로 이동시키기 위한 조건을 하나 더 추가해 보겠습니다.
@미디어 화면 및 (max-width:720px)( .footer_block( display: block; width: 96%; ) )
저것들. 요소는 더 이상 인라인이 아니며 블록 기반이 되므로 차례로 정렬됩니다. width: 96% 속성을 사용하면 너비를 최대로 늘립니다(패딩(내부 여백)을 유지하므로 100%가 아님).
여기에서는 HD 태블릿과 스마트폰의 해상도가 일반적으로 세로 방향에서 800픽셀이므로 아래의 모든 항목에 대해 메뉴 블록이 숨겨져 있다는 사실에서 시작했습니다.
실제로 and 연산자를 사용하여 여러 조건을 한 번에 추가하면 CSS 미디어 쿼리가 더 복잡해질 수 있습니다. 화면 너비뿐만 아니라 높이, 방향, 지원되는 색상 수 및 기타 매개변수도 결정할 수 있습니다.
마지막으로 jQuery를 사용하여 축소된 좁은 왼쪽 블록(on.left_swap)을 클릭하여 왼쪽 메뉴를 엽니다. 예를 들면 다음과 같습니다.
JQuery(function($) ( $(".left_swap").click(function ()( $(".left_side").toggle(); return false; )); ))
여기의 모든 것은 매우 간단합니다. 블록 클릭을 처리하고 메뉴를 사용하여 블록을 표시하거나 숨깁니다. 코드가 너무 간단해서 개선할 수도 있지만 예제로만 사용하겠습니다.
따라서 반응형 웹사이트의 레이아웃 예를 살펴보았는데, 그 결과는 데모 페이지에서 평소와 같이 볼 수 있습니다. 브라우저 창의 너비를 늘리거나 줄여보고 블록의 동작을 관찰해 보세요.
추신: 최근 블로그 댓글에 스팸이 많아 지울 시간이 항상 부족하지만, 여러분의 댓글을 모두 요점까지 읽고 답변하도록 노력하겠습니다.
반응형 웹사이트 디자인에 대해 두 가지 주요 오해가 있습니다. 어떤 사람들은 이것이 단순히 요소가 압축된 사이트의 축소된 표시라고 생각합니다. 다른 사람들은 반응형 디자인을 사이트의 모바일 버전과 지속적으로 동일시합니다. 이 기사에서 우리는 i에 점을 찍고 그것이 실제로 어떤지 알려줄 것입니다.
적응형 레이아웃이란 무엇입니까?적응형은 요소가 다양한 화면 해상도에 따라 동적으로 조정되므로 사이트가 다양한 장치에서 올바르게 표시되는 레이아웃입니다.
간단히 말해서, 반응성은 사이트의 작은 버전이 아니라 블록을 동적으로 쌓는 것입니다.
사용자가 컴퓨터, 태블릿 또는 휴대폰 등 어떤 장치에서 사이트에 액세스하는지는 중요하지 않습니다. 사용이 똑같이 편리하며 필요한 기능은 그대로 유지됩니다.
적응형 레이아웃이 필요한 이유는 무엇입니까?오늘날에는 사람들이 태블릿과 휴대폰으로 인터넷에 접속하는 빈도를 입증하기 위해 더 이상 연구나 통계를 찾을 필요가 없습니다. 이 현실은 대중 교통, 카페, 대기열 등 모든 곳에서 우리를 둘러싸고 있습니다. 사람들은 기꺼이 인터넷 서핑으로 시간을 채우며 그것이 얼마나 편리한지 스스로 알고 있습니다. 피자를 선택하고 주문하기 위해 먼저 집에 가서 컴퓨터를 사용하는 사람은 없지만 휴대폰으로 빠르게 사이트로 이동하여 동시에 다른 작업을 수행합니다. 구매 아이디어가 떠오르면 가장 쉬운 방법은 즉시 온라인에 접속하여 경쟁 상점의 제안을 비교하고 지체없이 제품을 주문하는 것입니다. 그리고 그러한 예는 셀 수 없이 많습니다!
적응성은 현대 웹사이트의 중요하고 필수 조건 중 하나입니다.
사이트가 컴퓨터에서만 올바르게 표시되는 경우 태블릿이나 휴대폰에서 볼 때 탐색하기 어렵고 블록의 크기가 조정되지 않으며 원하는 링크에 손가락을 갖다 대는 것이 어렵습니다. 결과적으로 사용자는 짜증이 나고 목표 작업을 수행할 수 없으며 비뚤어진 디스플레이를 이해하는 데 시간을 낭비하고 리소스를 떠납니다. 그리고 그는 결코 그 곳으로 돌아오지 않습니다. 그리고 경쟁사로 이동합니다.
그렇기 때문에 적응형 웹 사이트 주문 결정은 변덕스러운 것이 아니라 매출 수준에 직접적인 영향을 미치는 조건입니다.
반응형 웹사이트는 어떻게 작동하나요?비반응형 웹사이트는 쉽게 알아볼 수 있습니다. 태블릿이나 휴대폰에서 볼 때 해당 영역의 일부만 표시됩니다. 보이는 영역을 왼쪽 및 오른쪽으로 이동하고, 글꼴을 읽을 수 있도록 확대하고, 축소해야 합니다. 원하는 섹션이나 신청서를 찾으세요.
반응형 레이아웃을 갖춘 웹사이트는 화면 너비에 따라 기기에 맞게 조정됩니다. 페이지의 모든 요소가 조정됩니다. 크기가 변경되고 일부 보조 콘텐츠와 장식 요소가 나타나거나 사라집니다. 동시에 블록은 사용자에게 편리하도록 재배열됩니다. 중요한 정보에 중점을 두고 중요하지 않은 데이터는 제거하거나 최소화합니다.
일반적으로 화면 너비가 작을수록 정보 표시가 더 집중되고 관련된 블록 수가 줄어듭니다. 동시에 사용자는 규모를 변경할 필요가 없습니다. 작은 화면에서도 모든 것이 간단하고 명확합니다.
반응형 사이트의 또 다른 특징은 사용자가 쉽게 손가락으로 화면의 버튼을 누르거나 링크를 따라갈 수 있도록 중요한 요소를 확대하는 것입니다. 사이트의 전환은 이에 직접적으로 달려 있으므로 적응형 디자인을 사용자 친화적으로 만드는 것이 중요합니다.
반응형 웹사이트에 대해 알아야 할 중요한 사실1. 반응형 홈페이지와 모바일 홈페이지는 다릅니다.
반응형 웹사이트에 관해 이야기할 때, 이는 다양한 장치를 위한 하나의 웹사이트를 의미합니다. 이것이 모바일 버전의 사이트와의 주요 차이점입니다. 모바일 버전은 별도의 완전한 웹사이트로, 고유한 기능, 고유한 레이아웃, 고유한 콘텐츠를 갖고 있는 경우가 많습니다. 모바일 버전은 모바일 장치에서 사이트에 액세스하는 사용자의 편의성, 즉 데스크톱 버전에서 사용자에게 매우 중요한 것이 무엇인지, 중복되고 쉽게 삭제할 수 있는 것이 무엇인지 고려하여 개발되었습니다.
2. 기능은 모든 기기에서 동일합니다.
여기에서는 모든 것이 명확합니다. 사이트가 하나뿐이므로 사용자가 사이트에 액세스하는 데 사용하는 장치에 관계없이 해당 기능은 동일합니다.
3. 반응형 디자인에는 한계가 있습니다.
주로 화면 크기를 변경할 때 콘텐츠의 원래 구조를 유지하는 것과 관련이 있습니다. 적응형 버전에서는 데스크톱 버전에 있는 슬라이더와 큰 배경 이미지를 버리고 Flash를 사용하지 않는 경우가 많습니다. 일반적으로 최선의 선택을 권장합니다.
하지만 클라이언트가 요구하는 버전에서는 디자인이 합의됐으나 완성된 레이아웃이 불편한 경우도 발생한다. 그런 다음 기술 사양에 따라 엄격하게 작업하므로 모든 변경에는 추가 비용이 발생합니다.
4. 적응성은 완전하거나 부분적일 수 있습니다.
전체 적응성 - 모바일 장치에서 데스크탑까지, 부분적으로 - 예를 들어 태블릿이나 노트북에서 데스크탑까지. 반응형 디자인을 개발할 때 일반적으로 클라이언트가 가장 많은 트래픽을 생성하는 특정 장치에 중점을 둡니다.
5. 모든 웹사이트가 완전한 반응형 디자인의 이점을 누리는 것은 아닙니다.
인식을 위해 충분한 양의 화면 공간이 필요한 복잡한 기능 및/또는 콘텐츠가 있는 사이트의 경우 완전한 적응성은 종종 해로울 수 있습니다. 기능이 완성될 장치 목록을 선택하고 이에 대한 부분적 적응성을 갖춘 버전을 만들고, 나머지는 기능을 축소하고 전체 화면 버전으로 전환할 수 있는 기능을 갖춘 모바일 버전을 만드는 것이 좋습니다. .
6. 브라우저 간 호환성은 다른 브라우저에서도 동일한 표시를 담당합니다.
사이트가 다른 브라우저에서도 동일하게 표시되는 것이 중요한 경우 기술 사양에 이 항목을 표시하십시오. 그렇지 않으면 이전 버전의 브라우저에서는 사이트에 오류가 표시되고 읽을 수 없는 글꼴이 표시될 수 있습니다. 그리고 이것은 타겟 청중을 잃는 직접적인 길입니다.
적응형 레이아웃을 주문하려는 경우 알아야 할 사항"Technologies of Success"라는 회사는 적응형 웹 사이트 레이아웃을 만드는 서비스를 제공합니다. 메인 사이트 개발 단계에서 적응형 디자인을 제공하고 기술 사양에 적어 두는 것이 좋습니다. 하지만 .psd 형식의 기성 디자인을 가지고 저희에게 오시면 저희도 도움을 드릴 수 있습니다. 우리는 CorelDraw에서 만든 레이아웃의 레이아웃을 담당하지 않습니다. 이 경우 고객에게 먼저 디자인을 준비한 다음 레이아웃을 준비하도록 제안합니다.
사이트의 세부 사항과 기술 사양을 알지 못하면 레이아웃 시기를 결정하는 것이 불가능합니다.
일반적으로 반응형 기업 웹사이트의 레이아웃은 평균 15일이 소요되며 반응형 온라인 스토어의 디자인 시간은 사이트의 복잡성에 따라 직접적으로 달라집니다.
고객이 기술 사양에 따라 사이트의 적응성과 모든 요소의 올바른 작동을 확인할 때까지 우리는 레이아웃을 다음 단계인 프로그래밍으로 전환하지 않습니다.
아직 질문이 있으신가요? 아니면 모바일 버전인가요? 무료 전화번호 8 800 775-17-11로 전화하거나 번호를 남겨주시면 저희가 다시 전화해 모든 내용을 알려드리겠습니다.
안녕하세요 여러분!
적응형 레이아웃의 원리가 나타났을 때 그것은 나에게 악몽이었으며 여전히 회복할 수 없는 고통이었습니다. 결국 모든 해상도에 대해 실질적으로 레이아웃을 재정렬하고 새 코드를 작성해야 하며, 결국 유지 관리가 더 어려운 많은 코드가 생성됩니다. 이 고통을 '코드 엔트로피'로 이해하자
최근에 모바일 애플리케이션용 레이아웃을 만들 기회가 주어졌고 마침내 이 고통을 극복하고 아름답고 간결하게 만들기 위해 rem을 사용하기로 결정했습니다. 이것은 나에게 가장 간단한 해결책처럼 보였습니다. 모바일 브라우저의 100%가 이 장치를 지원합니다. 요점은 html 태그에 대해 여러 줄의 미디어 쿼리를 작성하여 레이아웃이 다양한 해상도에서 어떻게 보이는지에 비례하여 기본 글꼴 크기(픽셀)만 표시하고 미디어 쿼리가 없는 나머지 레이아웃은 다음과 같이 배치된다는 것입니다. 평소에는 rem 대신 픽셀만 사용합니다. 이 기술은 쉽게 확장 가능하며 기본 글꼴 크기에 따라 레이아웃을 조정합니다.
이러한 방식으로 코드를 최소화하고 적응형 레이아웃을 쉽게 적용할 수 있다는 것은 정말 대단합니다!
이 방법에는 한 가지 단점이 있었습니다. psd 레이아웃의 픽셀을 rem으로 지속적으로 다시 계산해야 했지만 이 문제를 신속하게 해결했습니다. 특수 함수를 작성하고 이전과 같이 픽셀 단위로 배치했는데, 전처리기 자체가 렘.
하지만! 주요 농담은 디자인이 동일한 적응형 모바일 애플리케이션을 디자인하는 데 이 방법을 사용했다는 것입니다.
적응형으로 돌아왔을 때 일반 사이트의 경우- 고통이 나에게 돌아왔다 이전보다 더욱 강력해졌고,왜냐하면 일반적으로 우리는 3~6가지의 서로 다른 디자인을 갖고 있기 때문입니다.
1) 대형 데스크탑 1600-1920픽셀
2) 소형 데스크탑/노트북 ~1100-1400픽셀
3) 올드 모니카/태블릿 - 768-1024픽셀
4) 태블릿 미만/대형 스마트폰 ~600픽셀
5) 스마트폰 300-480
6) 구형 스마트폰 250픽셀.
물론 과장했지만 확실히 최소한 3개 이상의 레이아웃이 이루어져야 합니다.
첫 번째 질문이자 가장 중요한 질문은 다음과 같습니다. 적응형 레이아웃을 최소화하고 코드를 아름답게 만드는 방법은 무엇입니까? 소위 말하는 것을 줄이는 방법 코드의 엔트로피? 어떤 멋진 접근 방식/기술이 있나요?
거기에 대한 답을 찾기 위해 멋진 웹 스튜디오의 여러 사이트를 살펴보았더니 다들 무질서하게, 즉 일반적으로 누워 있는 것을 보았습니다. 귀찮게하지 않고.
내가 본 유일한 것은 어떤 사람들이 일반적인 픽셀 대신 글꼴에 em과 백분율을 사용한다는 것입니다. 텍스트 크기 조정을 위한 것 같지만 이것이 적응을 위한 코드를 어떻게 줄이는지는 확실하지 않지만 제 생각에는 모든 것을 복잡하게 만들 뿐입니다. 상위 블록의 글꼴 크기와 전처리기의 글꼴 크기에 따라 계산을 수행해야 합니다. 도움이 안 될 거예요... 왜 em 단위로 글꼴 크기를 설정해야 하는지 모르겠어요. rem의 문제는 여전히 아무데도 가지 않았습니다... 아마도 제가 형편없는 레이아웃 디자이너일지도 모르겠습니다... 그런데, 그 사이트들 중 가장 완강하게는 여백과 기타 상자 크기 속성을 위해 그것들을 사용했습니다...
질문 #2:
em을 사용하는 이유는 무엇입니까?
이제 질문 3번입니다.
정말 단일한 방법론이 없는 걸까요? 모든 사람이 원하는 대로 할 수 있을 만큼 레이아웃의 모든 것이 정말 형편없나요? 아니면 실패한 사례를 보았습니까(테마포레스트의 주요 테마와 최고의 웹 스튜디오 사이트를 검색했지만)?
