A brief discussion on html5 responsive layout_html5 tutorial skills-H5 Tutorial-php.cn

1. What is responsive layout?

Responsive layout is a concept proposed by Ethan Marcotte in May 2010. In short, it means that a website can be compatible with multiple terminals - rather than making a specific version for each terminal.

This concept was born to solve mobile Internet browsing. Responsive layout can provide a more comfortable interface and better user experience for users on different terminals. With the current popularity of large-screen mobile devices, it is not an exaggeration to describe it as a general trend.

As more and more designers adopt this technology, we not only see a lot of innovation, but also see some forming patterns.

2. What are the advantages and disadvantages of responsive layout?

Advantages:

Strong flexibility when facing devices with different resolutions Can quickly solve the problem of multi-device display adaptation Disadvantages:

Compatible with various devices, heavy workload and low efficiency The code is cumbersome, hidden useless elements will appear, and the loading time is lengthened In fact, this is a compromise design solution, which is affected by many factors. Less than optimal results It changes the original layout structure of the website to a certain extent, which may cause user confusion

3. How to design responsive layout?

1. How to solve the compatibility issues between different devices?

Media Query in CSS3 can solve this problem.

2. What values can be obtained by media query?

The width and height of the device device-width, device-heigth display screen/haptic device.

The width and height of the rendering window width, height display screen / tactile device.

The hand-held direction of the device, horizontal or vertical orientation (portrait|lanscape) and printer, etc.

Aspect-ratio dot matrix printer, etc.

Device-aspect-ratio-dot matrix printer, etc.

Object color or color list color, color-index is displayed on the screen.

The resolution of the device

3. Grammatical structure and usage

Syntax: @media device name only (selection condition) not (selection condition) and (device selection condition), device two {sRules}

Usage:

a. Example 1: Use @media in link:

omitted by ONLY in the above use, limited to computer displays. The first condition Max-Width refers to the maximum width of the rendering interface, and the second condition MAX-DEVIDE-WIDTH refers to the maximum width of the device.

b. Embed @media in the style sheet:

Copy code The code is as follows: @media (min-device-width: 1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px ) and (max-device-width:1024px) and (orientation:portrait) {srules} 컴퓨터 모니터 해상도(너비)를 1024px 이상(최대 표시 너비는 989px)으로 설정합니다. 휴대용 장치의 경우 화면 너비가 480px이고 가로로 배치됩니다. 즉, 480 사이즈는 지면과 평행하다) 휴대용 기기 화면 너비가 480px 이상 1024px 미만이고 기기의 CSS 스타일이 세로로 배치됩니다.

4. 반응형 레이아웃 구현

코드 복사 코드는 다음과 같습니다. width – 뷰포트의 너비 height – 뷰포트의 높이 initial-scale – 초기 배율 비율 minimum-scale – 사용자가 확대/축소할 수 있는 최소 비율 maximum-scale – 사용자가 확대/축소할 수 있는 최대 비율 user-scalable – 사용자가 수동으로 크기를 조정할 수 있는지 여부 --> 페이지 헤드에 css3-mediaqueries.js만 인용하면 됩니다.-> http:/ /css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> > Document /** 디자인 아이디어는 매우 간단합니다. 먼저 표준 브라우저에서 고정 너비를 정의하고(표준 브라우저의 해상도가 1024px이면 너비를 980px로 설정합니다.) 그런 다음 미디어 쿼리를 사용하여 모니터링합니다. 브라우저 크기가 1024px 미만인 경우 는 미디어 쿼리에서 미리 설정한 스타일 시트를 통해 페이지 너비를 백분율 표시로 설정합니다. 브라우저에 따라 하위 페이지가 표시되어 적절하게 조정됩니다. 마찬가지로 브라우저의 가시 영역이 특정 값(예: 650px)으로 변경되면 미디어 쿼리에서 미리 설정한 캐스케이딩 스타일 시트에 따라 페이지의 구조 요소가 그에 맞게 조정됩니다. 예시를 확인해 보세요. **/ /* 브라우저의 가시 영역이 980px 미만인 경우 */ @media 화면 및 (최대 너비: 980px) { #wrap { width: 90%; margin:0 auto;} #content {width: 60%;padding: 5%;} #sidebar {width: 30%;} #footer {padding: 8% 5%;margin-bottom: 10px;} } /* 브라우저의 가시 영역이 650px 미만인 경우 * / @media 화면 및 (최대 너비: 650px) { #header {높이: 자동;} #searchform {위치: 절대;상단: 5px;오른쪽: 0;} # 콘텐츠 {폭: 자동; 부동: 없음; 여백: 20px 0;} #sidebar {폭: 100%; 부동: 없음; 여백: 0;} }/**더 나은 표시 효과를 위해 일부 CSS 속성의 초기 값 형식을 지정해야 하는 경우가 많습니다. *** / /* iPhone의 Safari에서 자동 글꼴 크기 조정 비활성화*/ html { -webkit-text-size-adjust: none; } /* HTML5 요소를 블록으로 설정 */ article, Aside, Details, figcaption, Figure, footer, header, hgroup, menu , nav, section { display: block; } /* 사진과 같은 적응형 조정 설정 videos*/ img { 최대 너비: 100%; 높이: 자동; 폭: auto9; /* ie8 */ } .video 삽입, .video 개체, .video iframe { 너비: 100%; 높이: 자동; }