html5/css3 반응형 페이지 개발 요약

적응형은 모든 터미널에 적용되는 템플릿 세트이지만 각 장치에 표시되는 레이아웃은 동일하며 일반적으로 너비 적응형이라고 알려져 있습니다.

반응형 템플릿 세트는 모든 터미널에 적용되지만 각 장치에 표시되는 레이아웃은 다를 수 있습니다.

반응형/적응형 웹 디자인은 다양한 기기와의 호환성으로 인한 과중한 작업량, 번거로운 코드, 긴 로딩 시간 등의 단점이 있지만, 크로스 플랫폼 및 터미널이기 때문에 한번에 디자인할 수 있고 보편적으로 적용 가능하며 상황에 따라 적응할 수 있습니다. 화면 해상도, 사진 자동 확대/축소 및 레이아웃 자동 조정은 기술적인 구현일 뿐만 아니라 디자인에 대한 새로운 사고 방식이기도 합니다.

많은 웹사이트의 솔루션은 전용 모바일 버전이나 iPhone/iPad 버전을 제공하는 등 다양한 장치에 대해 다양한 웹페이지를 제공하는 것입니다. 이렇게 하면 효과는 보장되지만 더 번거롭고 동시에 여러 버전을 유지 관리해야 합니다. 또한 웹 사이트에 여러 포털이 있는 경우 아키텍처 설계가 크게 복잡해집니다.

화면이 너무 작으면 웹페이지를 화면 크기에 맞게 조정할 수 있더라도 작은 화면에서 볼 때 콘텐츠가 너무 붐비는 느낌을 받게 됩니다. 이를 해결하기 위해 파생된 개념입니다. 문제. 화면 너비를 자동으로 인식하고 그에 따라 웹 디자인을 조정할 수 있습니다.

적응형 경험 http://m.ctrip.com/html5/ 반응형 경험 http://segmentfault.com/

CSS 비밀 정원 http://www.csszengarden.com/

http://caibaojian.com/demo/ued/

 <메타 이름=뷰포트 콘텐츠=폭=장치 폭, 초기 규모=1.0, 최대 규모=1.0, 사용자 확장 가능=아니오>

이 코드의 여러 매개변수가 설명됩니다.

§width = device-width: 너비는 현재 장치의 너비와 같습니다.

§initial-scale: 초기 스케일링(기본 설정은 1.0)

§minimum-scale: 사용자가 확대/축소할 수 있는 최소 배율(기본값은 1.0)

§maximum-scale: 사용자가 확대/축소할 수 있는 최대 배율(기본값은 1.0으로 설정)

§user-scalable: 사용자가 수동으로 확대/축소할 수 있는지 여부(기본값은 no입니다. 사용자가 페이지를 확대하거나 축소하는 것을 원하지 않기 때문입니다)

2. 미디어 쿼리 CSS3 미디어 쿼리는 반응형 디자인을 구현하는 핵심 요소입니다. 미디어 쿼리 기능을 사용하면 페이지에서 장치 너비에 따라 다른 CSS 블록을 사용하도록 할 수 있습니다.

다음 CSS 규칙은 화면 너비가 980보다 작거나 같을 때 적용됩니다.

 @media (orientation:portrait) 및 (max-width:460px) { .video .innerBox .news a.more { 디스플레이: 없음; } .video .innerBox .news 스팬 { 디스플레이: 없음 } .video .innerBox .news; { 너비: 100%; } .video .innerBox .news ul { 너비: 100%; 텍스트 정렬: 센터; }}

방향: 세로 |

초상화:

지정된 출력 장치에서 페이지의 가시 영역 높이가 너비보다 크거나 같도록 지정합니다.

풍경:

세로 값을 제외하면 모두 가로입니다.

화면 너비가 400픽셀에서 600픽셀 사이인 경우 CSS 로드를 선택하여 smallScreen.css 파일을 로드합니다.

 <link rel=stylesheet type=text/cssmedia=screen and (min-width: 400px) and (max-device-width: 600px) href=smallScreen.css />

3. 퍼센트 레이아웃

1. html5/css3 반응형 페이지 디자인 과정

1단계: 모바일 장치(휴대폰, 태블릿) 및 PC를 포함하여 호환되어야 하는 장치 유형과 화면 크기를 결정합니다. 모바일 기기의 경우 디자인 및 구현 시 제스처 기능 추가에 주의하세요.

화면 크기: 다양한 휴대폰 화면 크기(가로 및 세로 포함), 다양한 태블릿 크기(가로 및 세로 포함), 일반 컴퓨터 화면 및 와이드스크린이 포함됩니다.

2단계: 결정된 크기에 대해 다양한 와이어프레임 프로토타입을 만듭니다. 다양한 크기에 따라 페이지 레이아웃이 어떻게 변경되는지, 콘텐츠 크기를 조정하는 방법, 기능 및 콘텐츠 삭제, 특수 환경에서 작동하는 방법까지 고려해야 합니다. 특화설계 등 이 프로세스에는 디자이너와 프런트엔드 개발자 간의 긴밀한 커뮤니케이션이 필요합니다.

3단계: 시각적 디자인 몇 가지 간단한 테스트를 위해 이미지를 해당 장치로 가져오면 접근성, 가독성 등의 문제를 최대한 빨리 찾는 데 도움이 됩니다.

기존 웹 개발과 비교하여 반응형 디자인 페이지는 페이지 레이아웃과 콘텐츠 크기가 변경되므로 최종 출력이 디자인 초안과 크게 다를 가능성이 높으며 프런트 엔드 개발자와 디자이너 간의 더 많은 의사소통이 필요합니다.

2. 반응형 글꼴

CSS의 여러 다른 단위 간의 비교

px: 픽셀. 상대적 길이 단위, 크기는 화면 해상도에 따라 결정됩니다. (언론 문의에 협조)

em: 상대 길이 단위. 현재 개체 내 텍스트의 글꼴 크기와 동일하거나, 인라인 텍스트의 현재 글꼴 크기가 설정되지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다. em 값은 고정되어 있지 않으며 상위 요소의 글꼴 크기를 상속합니다. 수정되지 않은 모든 브라우저는 1em=16px를 준수합니다. 그런 다음 12px=0.75em,10px=0.625em입니다. 글꼴 크기 변환을 단순화하려면 CSS의 본문 선택기에서 Font-size=62.5%를 선언해야 합니다. 그러면 em 값이 16px*62.5%=10px가 되므로 12px=1.2em, 10px=1em이 됩니다. , 또한 즉, 원래 px 값을 10으로 나눈 다음 단위를 em으로 변경하기만 하면 됩니다.

rem: CSS3의 새로운 상대 단위입니다. em과의 주요 차이점은 rem을 사용하여 요소의 글꼴 크기를 설정할 때 여전히 상대적 크기이지만 HTML 루트 요소에만 상대적이라는 것입니다. 이 단위는 상대적 크기와 절대 크기의 장점을 결합한 것이라고 할 수 있습니다. 이를 통해 루트 요소만 수정하여 모든 글꼴 크기를 비례적으로 조정할 수 있으며, 레이어별로 글꼴 크기를 합성하는 연쇄 반응을 피할 수 있습니다. 현재 IE8 이하를 제외한 모든 브라우저는 rem을 지원합니다. 이를 지원하지 않는 브라우저의 경우 해결책은 매우 간단합니다. 즉, 추가 절대 단위 설명을 작성하는 것입니다. 이러한 브라우저는 rem으로 설정된 글꼴 크기를 무시합니다.

%: 또한 백분율을 사용하여 크기를 지정할 수도 있습니다. 이는 브라우저의 기본 글꼴 크기에 비해 현재 글꼴의 배수를 나타냅니다. 이 단위는 페이지 반응형 디자인에도 자주 사용됩니다.

 html{font-size:62.5%;/* 10¶16=62.5% */}body{font-size:12px;font-size:1.2rem;/* 12¶10=1.2 */}p{font-size :14px;글꼴 크기:1.4rem;}

rem을 지원하지 않는 브라우저와 호환되기 위해서는 rem 앞에 해당 px 값을 적어서 이를 지원하지 않는 브라우저도 정상적으로 다운그레이드할 수 있도록 해야 한다는 점에 유의해야 합니다. 사실 기본 글꼴 크기: 100%를 사용할지, 글꼴 크기: 62.5%로 설정할지 크게 고민할 필요는 없습니다. CSS 전처리 도구를 도입하면 자연스럽게 기본값을 사용할 수 있습니다. .다른 이유로 글꼴 ​​크기: 62.5%를 사용하는 경우에는 문제가 없으며 본문에서 필요한 기본 글꼴 크기로 다시 재설정할 수 있습니다.

3. 반응형 이미지 및 비디오 처리

http://alistapart.com/d/active-web-design/ex/ex-site-flexible.html#

1. 배경 이미지----미디어 쿼리

2. 그림 액화----탄성 그림

 img, 개체 { 최대 너비: 100%;}https://www.filamentgroup.com/examples/응답-이미지/

3.HTML5 <picture> 요소

HTML5 <picture> 요소는 여러 개의 그림을 설정할 수 있습니다.

브라우저 지원

 <그림> <source srcset=images/img_smallflower.jpg media=(max-width: 400px)> <source srcset=images/img_flowers.jpg> <img src=images/img_flowers.jpg style="margin: 0px; padding: 0px; 윤곽선: 없음; 줄 높이: 25.2px; 글꼴 크기: 14px, 너비: 660px, 오버플로: 숨김, 지우기: 둘 다, 글꼴 계열: tahoma, arial, Microsoft YaHei;"> 
 <script src=http://cdn.gbtags.com/picturefill/2.0.0/picturefill.min.js></script>
 4. noscript 태그를 사용하여 반응형 이미지 만들기
 크고 작은 그림의 Js 동적 로딩 
 <span class=img-placeholder></span><noscript data-mobilesrc=small.jpg data-fullsrc=big.jpg data-alttext=대체 텍스트 class=responsivize> <img src=big.jpg></noscript > <script type=text/javascript>var ResponseImageTag = { replacementInitialImages:function(respons) { var platform = Desktop; resImage = '.'+respons; var ResponseImages = $(resImage); var i, noOfResponseImages = ResponseImages.length; //현재 디스플레이 장치 너비 테스트 if(screen.width <= 767){ //767px, ipad보다 작습니다. 모두 모바일 플랫폼이라고 생각합니다 = mobile } //이미지에 초기 소스 요소를 설정합니다. for(i = 0; i < noOfResponseImages; i = i + 1 ){ var noScriptElem = $(반응형 이미지[i]); var img = window.document.createElement(img); img.alt = noScriptElem.attr(data-alttext); = 모바일){ img.src = noScriptElem.attr(data-mobilesrc) }else{ img.src = noScriptElem.attr(data-fullsrc); } img.className = $('.img-placeholder').eq(i).html('').append(img); ); } }};반응하는ImageTag.replaceInitialImages('responsivize');$(window).resize(function(){ ponsitiveImageTag.replaceInitialImages('responsivize');});</script>
 4. 반응형 프레임워크
 사용자 정의: 웹 사이트에 다양한 디자인이 많이 있고 여전히 부트스트랩을 사용하려면 프레임워크를 하단 레이어로 수정해야 합니다. 많은 수의 스타일을 복사해야 하며 CSS 계층 구조는 혼란스럽고 유지하기가 어렵습니다.
 어떤 상황에서는 부트스트랩이 매우 유용합니다. 예를 들어 상대적으로 아름다운 개인 웹 사이트, 기업 웹 사이트, 블로그 백엔드 관리 인터페이스 및 높은 페이지 사용자 정의가 필요하지 않은 기타 프로젝트를 빠르게 구축하려는 경우 대부분의 백엔드 시스템 브라우저가 좋은 브라우저와 호환되는 경우가 많습니다. 양보 스타일은 세부 사항을 파헤치기가 쉽지 않습니다. 또는 브라우저 호환성과 수많은 장치 크기를 고려할 때 웹 사이트 프런트 엔드 구축에 경험이 없을 수도 있습니다. Bootstrap이 많은 문제를 해결해 줄 것입니다.