A brief discussion on html5 responsive layout_html5 tutorial skills

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. 반응형 레이아웃 구현

코드 복사

코드는 다음과 같습니다.