여기서는 CSS를 사용하여 다양한 크기의 모바일 미디어에 맞게 반응형 웹사이트 배경을 만드는 방법을 배우게 됩니다. 그림이 1 감마를 기반으로 하는 경우 회색이거나 그라디언트일 수 있으므로 여기서는 이 기술을 사용하지 마십시오. 온라인 영화와 같은 주제별 리소스에서 찾을 수 있는 이미지 아래에만 들어가고 다양한 주제에서도 찾을 수 있습니다. 현재 사진이 설치되어 있으면 온라인 서비스를 볼 수 있으며 사진이 단순히 흐려지는 것을 볼 수 있으며 설명이 있으면 후면보기의 어느 부분에 배치되어 있는지 이해할 수 없습니다.
우리는 모든 것이 정확할 것임을 강조하고 맨 아래에 어둡고 투명한 것이 추가되어 키워드를 쓰고 확실히 우아하게 디자인할 수 있습니다. 비슷한 방법으로 빠르게 떼어낼 수 있어 스타일리쉬하게 꾸밀 수 있도록 제작되었습니다. 그러나 가장 중요한 것은 예를 들어 스마트 폰에서 입력하면 사진이 기본 디자인에 완벽하게 들어 맞는다는 것입니다.
대부분의 웹 마스터는 반응형 디자인을 위해 전체 레이아웃을 수행하지만 배경에 대해 아무것도 기억하지 못합니다. 아마도 구조가 혼합되기 때문에 스타일에 따라 배치해야 하는 위치도 알지 못할 것입니다. 우리가 주로 만들어내려고 하는 디자인을 눈에 잘 띄는 곳에 두는 것입니다. 이제 모든 화면에서 모든 것이 올바르게 보이도록 자동으로 늘어나기 시작하는 고무로 만들 수 있습니다.
확인하는 경우 메인 모니터에서 와이드 모니터 아래로 이동하고 여기에서는 태블릿 아래로 이동합니다.
설치를 시작해 보겠습니다.
반응형 CSS 배경
CSS를 사용한 반응형 전체 배경 이미지
CSS
HTML,본문( 높이: 100%; } 몸 ( 배경 이미지: url(http://site/ABVUN/sarunolas/zornet/kotas/2048.jpg) ; 배경 위치: 중앙 중앙; background-repeat: 반복하지 않음; 배경 부착: 고정; 배경 크기: 표지; 배경색: #8c8383;
이 매뉴얼에서 우리는 브라우저에서 볼 수 있도록 전체 보기가 창을 가로질러 완전히 늘어나도록 배경 이미지를 생성하는 매우 간단한 방법을 살펴보았습니다.
여기서는 background-size CSS 속성을 사용하여 여기에서 JavaScript를 사용할 필요가 없으며 모든 것이 순수 스타일을 사용하여 수행된다는 점을 강조해야 하는 곳에 모든 것이 올바르게 정렬되었습니다.
또한 GitHub의 예제도 첨부되어 있습니다.
적응형 레이아웃의 주요 작업 중 하나는 이미지(배경 이미지 포함)의 크기를 조정하여 화면 해상도가 다른 기기에서 올바르게 표시되도록 하는 것입니다.
태그에 사진과 함께 img간단합니다. 너비를 백분율로 설정하면 높이가 자동으로 조정됩니다. 이 방법은 배경 이미지에는 적용할 수 없습니다.
이 트릭은 패딩 백분율 값( 심) 요소. 이 방법은 이전 블로그 기사 A List Apart에 처음 게시되었지만 여전히 잘 작동합니다.
800 x 450 픽셀의 배경 이미지가 있고 이를 고정된 화면비 16:9의 배경으로 만들고 싶다고 가정해 보겠습니다. 아래 코드는 들여쓰기에 사용됩니다. px, 하지만 모든 것이 작동합니다 여자 이름. HTML5 그림 요소도 있습니다. 이전 브라우저에서 올바르게 작동하도록 하려면 HTML5 shiv 를 사용할 수 있습니다.
결과 요소는 예상대로 크기가 조정되지만 배경 이미지를 추가하면 결과가 그다지 좋지 않습니다. 속성 사용 배경 크기: 표지. 안타깝게도 이 방법은 Internet Explorer 8에서는 작동하지 않습니다. 이 문제를 해결하기 위해 다음을 사용하여 배경을 배치합니다. 배경 위치. 배경 이미지의 너비는 최소한 다음과 같아야 합니다. 최대 너비요소. 그렇지 않으면 사진이 잘립니다.
데스크톱에 보기 좋게 보이는 큰 배경 이미지가 있다고 가정해 보겠습니다. 하지만 모바일 장치에서는 너무 작으므로 올바른 해결책은 배경 너비를 줄이는 것입니다.
예를 들어 너비가 300픽셀인 작은 화면에서 너비가 800 x 200픽셀(4:1)인 이미지는 150픽셀(2:1)로 줄여야 합니다. 속성을 계산해보자 키그리고 패딩탑:
그림은 다양한 너비의 배경 이미지의 종횡비를 보여줍니다. 그래프의 기울기는 속성에 해당합니다. 패딩탑, 시작 높이 - 속성에 키. 결과 코드는 다음과 같습니다.
Div.column( /* 배경 이미지의 너비는 800px이어야 합니다 */ max-width: 800px; ) Figure.fluidratio( padding-top: 10%; /* 기울기 */ height: 120px; /* 시작 높이 */ background- 이미지: url(http://voormedia.com/examples/amsterdam.jpg); 배경 크기: 표지; -moz-배경-크기: /* Firefox 3.6 */ 배경 위치: 센터 /* Internet Explorer 7 /8 */ )
계산에 SCSS 사용
속성 패딩탑그리고 키 SCSS와 같은 전처리기를 사용하여 자동으로 계산할 수 있습니다. 이에 대한 예:
/* 두 차원(너비/높이)을 기준으로 유체 비율을 계산합니다. */ @mixin liquid-ratio($large-size, $small-size) ( $width-large: nth($large-size, 1); $width -작은: nth($작은 크기, 1); $높이-큰: nth($큰 크기, 2); $높이-작은: nth($작은 크기, 2); / ($width-large - $width-small); $height: $height-small * $slope * 100% ; ; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ ) Figure.fluidratio ( /* 이 요소는 800px에서 4:1부터 300px까지의 유동 비율을 갖습니다. */ @include 유동 비율(800px 200px, 300px 150px); 배경 이미지: url(http://voormedia.com/examples/amsterdam.jpg);
적응형이므로 브라우저 지원 정도와 복잡성이 모두 다릅니다. 반응형 이미지를 구현하는 복잡한 방법의 예로는 여러 이미지와 더 많은 마크업이 필요하고 브라우저 지원에 따라 달라지는 srcset 속성을 사용하는 것입니다.
불필요한 지루함을 버리자. 최신 사양을 사용하면 웹사이트 페이지에 사용되는 이미지를 유연하게 만들고 다양한 사용자 장치의 화면에 올바르게 표시할 수 있습니다. 이를 위해서는 CSS 클립의 몇 가지 속성만 사용하면 충분합니다.
적응형 이미지, 단일 이미지, 두 개 이상의 열로 구성된 이미지의 여러 변형 예는 물론 적응성이 보장된 대형 배경 이미지를 사용하는 예도 준비했습니다. 모든 옵션은 이미지의 너비 속성에 대한 백분율 값과 높이 속성에 대한 자동 값을 사용하는 것을 기반으로 합니다.
img(너비: 100%; 높이: 자동;)
img(너비: 100%; 높이: 자동; )
기본 반응형 이미지 값
게시물이나 기타 개별 블록에 사용되는 단일 이미지를 완전히 반응적으로 만들어야 하는 기본 예부터 살펴보겠습니다. 예를 들어, 기본 너비가 96%인 컨테이너가 있습니다. 최대 너비를 max-width: 960px로 설정합니다. , 이 블록에서는 적응형 이미지를 표시해야 합니다. 이 요소의 경우 컨테이너 내부에서는 너비를 100%로 설정하여 뷰포트 크기에 관계없이 너비가 항상 컨테이너 너비와 같도록 합니다. 따라서 높이를 자동 모드로 전환하면 이미지가 비례하여 변경됩니다.
div.container(너비: 96%; 최대 너비: 960px; 여백: 0 자동; /* 메인 컨테이너를 중앙에 배치 */) img (너비 : 100% ; /* 이미지 너비 */높이: 자동; /* 이미지 높이 */
}
div.container ( width: 96%; max-width: 960px; margin: 0 auto; /* 메인 컨테이너를 중앙에 배치 */ ) img ( width: 100%; /* 이미지 너비 */ height: auto; /* 이미지 높이 * / )
그것을 참고 HTML 속성의 너비 및 높이에 대한 고정 값이 마크업에 직접 지정된 경우에도 요소는 반응합니다.
반응형 열 이미지
때로는 간단한 이미지 갤러리를 구성하기 위해 이미지가 나란히 정렬되어 있거나 그리드로 표시되기를 원할 때가 있습니다. 이렇게 하려면 위에서 사용한 코드를 약간만 변경하면 됩니다. 첫 번째는 width 속성을 줄이고 요소를 설정하는 것입니다. 표시 속성의 인라인 블록 값, 즉 인라인으로 만드세요. 두 가지 레이아웃, 즉 2열 이미지 레이아웃과 3열 레이아웃을 살펴보겠습니다.
1. 2열 이미지 레이아웃 2열 이미지 레이아웃의 경우 너비를 48%, 즉 컨테이너의 약 절반으로 설정할 수 있습니다. 측면 패딩을 갖기 위해 값을 50%로 설정하지 않습니다.
img(너비: 32%; 디스플레이: 인라인 블록;)
img (너비: 32%; 디스플레이: 인라인 블록; )
적응형 이미지의 조건부 배치
다음 예에서는 보기 장치에 따라 배열이 다른 적응형 이미지를 사용하는 옵션을 고려해 보겠습니다. 스마트폰에서 볼 때 이미지는 한 열, 태블릿에서는 두 열, 큰 화면에서는 네 열에 표시됩니다. 이를 구현하기 위해 @media 미디어 쿼리를 사용하여 이 최대 이미지 너비 max-width가 적용될 미디어 유형을 지정합니다.
그것은 모두 매우 간단합니다, 그렇죠? 미디어 쿼리의 아이디어는 훌륭하고 꽤 오랫동안 사용되어 왔으며 널리 사용되었습니다. 예제에 표시된 매개변수는 이 특정 레이아웃에서 잘 작동합니다. 다른 디자인에서 어떻게 작동하는지 주의 깊게 확인해야 합니다.
전체 화면 반응형 이미지
뷰포트 크기를 100% 채우는 와이드 형식의 반응형 이미지를 만들려면 컨테이너의 max-width 속성(960px 값)을 제거하고 너비를 100%로 설정하면 됩니다. 이미지 너비도 100%로 설정됩니다.
.container (너비: 100% ; ) img (너비: 100% ; )
컨테이너(너비: 100%; ) img(너비: 100%; )
이 기술은 사용하기 매우 쉽고 강력한 브라우저 지원을 제공하지만 이미지는 항상 전체 크기로 표시된다는 점을 기억해야 합니다. 고해상도의 대형 이미지가 공간 전체를 가득 채우고 표시되는데, 이는 소형 모바일 기기의 경우 이미지를 배경 이미지로 사용하지 않는 한 항상 적합하지 않습니다.
아마 그게 전부일 것입니다. 다양한 장치에 대해 다양한 크기의 별도 이미지를 사용하려는 경우 이를 사용하면 더 이상 악화되지 않습니다. 이미지를 적응형으로 만드는 다른 방법을 알고 계시나요? 댓글을 작성해 주시면 확실히 고려해 보겠습니다. 새로운 방법은 항상 흥미로울 것입니다.
적응형 웹사이트 디자인에 대해 배우고 싶어하는 모든 분들께 인사드립니다. 이번 출판물에서는 CSS 도구를 사용하여 반응형 웹사이트 배경을 만드는 방법을 알려드리고 싶습니다. 오늘날에는 기술의 활발한 발전으로 인해 적응성이 유행하고 있습니다.
자존심이 강한 많은 사업가들이 크로스 브라우저 웹 서비스 개발을 주문합니다. 장치의 크기에 관계없이 탭의 너비와 높이에 맞게 내용을 조정하는 것입니다. 이것이 바로 이 기사에서 미디어 쿼리와 그 목적에 대해 이야기하고 테스트 예제를 제공하는 이유입니다. 자, 보고를 시작하겠습니다!
동적 웹 리소스에 대한 작은 역사
놀랍게도 웹 디자인의 반응성이나 적응성이라는 개념은 아주 최근에 나타났습니다. 2010년 Ethan Marcotte는 자신의 작품 중 하나에서 이 용어를 처음 사용했습니다. 이로 인해 그는 "반응형 웹 디자인"이라는 책을 출간하게 되었습니다.
이러한 웹 페이지 레이아웃 원칙은 개인용 컴퓨터, 태블릿, 노트북 등 화면 크기가 다양한 다양한 유형의 장치 수가 증가함에 따라 나타났습니다.
또한 오늘날 최신 스마트폰에는 고품질 그래픽 디스플레이가 탑재되어 있으며 다른 기술에 비해 인터넷 속도가 열등하지 않습니다. 따라서 최신 휴대폰을 구입하고 오랫동안 인터넷 서핑을 해온 사람들이 날이 갈수록 늘어나고 있습니다.
결과적으로 거의 모든 웹 리소스에는 자체 모바일 버전이 있습니다.
그렇다면 "반응형" 레이아웃은 무엇을 의미할까요?
적응형 레이아웃은 페이지의 개체 배열이 변경되는 창 크기를 지정하는 웹 서비스를 작성하는 방법입니다. 미디어 쿼리를 사용하여 설정됩니다. 그것이 무엇인지 자세히 살펴 보겠습니다.
미디어쿼리 사용방법과 그 구성요소
미디어 쿼리를 생성하려면( 미디어쿼리) 특별한 단어를 사용해야 합니다 @
미디어이것이 규칙입니다.
이 용어는 실제로 우리가 "개"라고 부르는 데 더 익숙한 @ 기호의 이름에서 유래되었습니다. 다음으로 개발자는 기술 유형, 미디어 기능, 때로는 논리 연산자를 결정하는 특정 역동성 조건을 규정합니다.
아래에는 주요 장치 유형이 나열된 표를 첨부했습니다.
기기 종류
설명
모두
기본값. 짐작할 수 있듯이 모든 유형의 장치에 사용됩니다.
TV
장치가 TV임을 나타냅니다.
화면
컴퓨터 모니터 화면.
tty
문자 크기가 고정된 장치입니다. 여기에는 화면 제한이 있는 터미널, 텔레타이프 및 다양한 장치가 포함됩니다.
인쇄
레이아웃은 인쇄 장치용으로 제작되었습니다.
투사
보호 장치에 사용됩니다.
휴대용
휴대용 장치(휴대폰, 태블릿 등)
점자
시각 장애인이 자원을 사용할 것임을 나타냅니다. 이러한 기술의 기초는 점자 시스템입니다.
양각
위의 시스템을 사용하는 프린터.
연설
여기에는 브라우저, 텍스트를 읽는 프로그램 등 모든 음성 서비스가 포함됩니다.
이제 미디어 쿼리에 사용되는 논리 연산자와 그 주요 목적에 대해 설명하겠습니다.
따라서 3가지 기본 논리 연산자가 있습니다.
시작해보자 ~ 아니다. 속성을 부정하는 데 사용됩니다. not은 우선순위가 낮으므로 명령문 대기열에서 마지막으로 실행됩니다. 요청 선언의 예:
@media 휴대용 및 (화면 아님) ( ... )
첫 번째 예에서는 연산자도 설명합니다. 그리고. 논리 AND를 담당합니다. 나열된 매개변수를 결합하고 지정된 조건을 해당 매개변수에 적용합니다.
이전 버전의 브라우저(http://site/brauzeryi-vebmastera/kakoy-brauzer-luchshe.html)에 대한 적응 조건을 설정해야 하는 경우 해당 단어만 사용해야 합니다. 초기화 예:
@미디어 전용 화면 및 (인쇄되지 않음) ( ... )
세심한 독자들은 내가 논리적인 것에 대해 아무것도 쓰지 않았다는 것을 알아차렸습니다. 또는, 그러한 연산자 없이는 할 수 없습니다. 따라서 미디어 쿼리에서는 쉼표가 이 기능을 수행합니다. 예를 들어:
@media 화면 및 (최대 너비: 900px), 인쇄 및 (방향: 세로) ( ... )
이제 기능에 대해 이야기할 차례입니다. 너무 많아서 주요 내용을 나열하겠습니다. 기존의 모든 미디어 기능에 대해 알아보려면 공식 문서나 가능한 모든 옵션이 나열된 기타 기사를 찾아보세요.
우선, 이름의 일부인 함수의 주요 부분에 접두사가 있다는 점에 주목하고 싶습니다. 분또는 최대. 예, 지정된 경우
최대 높이:840px,
그러면 지정된 치수보다 작은 창 높이에 조건이 적용됩니다. 그리고 만약 쓰여있다면
중높이: 950px,
이는 창의 높이가 지정된 크기보다 커야 함을 의미합니다.
따라서 TV, 인쇄, tty, 화면, 휴대용 및 프로젝션과 같은 장치에는 다음과 같은 기능이 있습니다.
이름
목적
예
색상(최소 색상, 최대 색상)
색상 채널당 비트 수를 나타냅니다. 예를 들어 숫자 3을 지정하면 총 색상 수는 512개입니다.
컬러 디스플레이의 경우:
@미디어 화면 및 (색상) (div ( 배경: 금색; ))
512가지 색상의 경우:
@media 화면 및 (min-color:3) ( div ( 배경: 빨간색; ))
정위
페이지의 가로 보기(가로) 또는 세로 보기(세로) 등 창 모양을 설명합니다.
@media screen and (방향: 가로) ( div( color: #F8F8FF; )) @media screen and (방향: 세로) ( div ( color: #FDF5E6;))
흑백(최소-흑백, 최대-흑백)
단색(단색) 장치용으로 결정됩니다. 숫자를 지정할 때 1픽셀당 할당되는 비트 수를 설정합니다.
@media 인쇄 및 (단색) ( body ( 글꼴 계열: Arial, sant-serif; ) h1, h3, p ( 색상: #000; ))
음성 기술을 제외한 모든 미디어에는 다음 미디어 기능이 사용됩니다.
반응형 웹페이지의 예
예를 들어 페이지 크기를 변경하고 사이트 제목의 색상을 변경하는 간단한 페이지를 만들었습니다.
CSS 스타일을 사용하여 사이트의 배경을 조정하면 해당 기능은 모니터에 완전히 표시되며 여기에는 JavaScript가 필요하지 않습니다. 통계에 따르면 배경 이미지가 전체 너비로 사용되는 널리 조회되고 인기 있는 인터넷 리소스이기 때문입니다.
또한 조정할 때 디자인 세부 사항을 고려해야 합니다. 이러한 버튼이나 아이콘은 모바일 장치에 올바르게 표시되지 않고 이 목적을 위해 설계되었으며 크기가 제거되며 필요에 따라 디자인을 만들 수 있습니다. 정확하게 말하자면, 모바일 장치에서 접근할 수 있는 사용자의 편의를 위해 모든 것이 이미 필요에 따라 구성되어 있습니다.
우선, 두 개의 배경 이미지가 필요합니다. 첫 번째 이미지는 최소 1920*1080의 와이드스크린이어야 합니다. 이를 통해 현재 생산되는 대부분의 와이드스크린 모니터에서 전체 시청 영역을 커버할 수 있습니다.
두 번째 이미지는 첫 번째 배경 이미지의 작은 버전이지만 모바일 장치에만 해당됩니다. 이 이미지의 해상도가 1920*1080 및 768*480이라고 가정해 보겠습니다. 두 번째 이미지는 작은 화면 해상도에서 페이지 로드 시간을 줄이는 것입니다. 이를 위해 미디어 쿼리를 사용하여 더 작은 버전의 배경 이미지를 가져오지만, 그것 없이도 모든 것이 잘 작동합니다. 배경 이미지를 편집하고 무게를 줄이는 방법은 가르쳐주지 않겠습니다. 모든 사람이 그러한 서비스에 대한 북마크를 가지고 있거나 Photoshop 작업 방법을 알고 있을 것입니다.
뭐, 코드 자체, 소스코드는 외국사이트에서 다운받은건데, 설명이 영어로 되어있어도 이해하는데 어렵지 않고, 이해하기 쉽게 지우지 않았습니다. CSS:
200?"200px":""+(this.scrollHeight+5)+"px");"> 몸 ( /* 이미지 위치 */ 배경 이미지: url(이미지/배경-사진.jpg);
/* 이미지는 항상 수직 및 수평 중앙에 위치합니다 */ 배경 위치: 중앙 중앙;
/* 이미지가 반복되지 않습니다 */ background-repeat: 반복하지 않음;
/* 이미지가 뷰포트에 고정되어 있을 때 움직이지 않도록 만듭니다. 콘텐츠 높이가 이미지 높이보다 큽니다 */ 배경 부착: 고정;
/* 이는 컨테이너 크기에 따라 배경 이미지의 크기를 조정하는 것입니다 */ 배경 크기: 표지;
/* 배경 이미지가 로드되는 동안 표시될 단색 배경색을 선택하세요 */ 배경색:#464646;
/* 단축 CSS 표기법 * 배경: url(Background-photo.jpg) 중앙 중앙 커버 반복 없음 고정; */ }
/* 모바일 장치의 경우 */ @media 전용 화면 및 (최대 너비: 767px) ( 몸 ( /* 이 배경 이미지의 파일 크기는 93% 더 작습니다. * 모바일 인터넷 연결 시 페이지 로드 속도를 향상시키기 위해 */ 배경 이미지: url(이미지/배경-사진-모바일-장치.jpg); } }
