Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the method of Responsive Web Design responsive web design". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the Responsive Web Design responsive web design method"?

Responsive Web Design responsive web page design 1. Common layout schemes

Fixed layout: take pixels as the basic unit of the page, regardless of the device screen and browser width, only one set of dimensions is designed.

Switchable fixed layout: also take pixels as the page unit, refer to the mainstream equipment size, design several sets of layouts with different widths. Select the most appropriate set of width layout by identifying the screen size or browser width

Flexible layout: taking the percentage as the basic unit of the page, it can adapt to the width of all device screens and browsers in a certain range, and can perfectly use the effective space to show the best results.

Mixed layout: similar to flexible layout, it can adapt to all device screens and browser widths in a certain range, and can perfectly use the effective space to show the best results; only mix pixels and percentages as page units.

Layout response: responsive design and implementation of the page, which requires layout design of different widths for the same content. There are two ways: pc priority (design from the pc side down)

Mobility first (designed up from mobile)

No matter which pattern the design is based on, to be compatible with all devices, the layout response inevitably requires some changes to the module layout (the critical point at which the layout changes are called breakpoints).

2. Content in responsive layout scheme (1) module: squeeze-pull (layout unchanged) (2) module content: line wrapping-tiling (layout unchanged) (3) module content: delete-add (layout unchanged) (4) module location change (layout change) (5) module display mode change: hide-expand (layout change) (6) module number change: delete-increase (layout change) 3. Characteristics of responsive layout

Design features:

Strong flexibility in the face of different resolutions

Can quickly solve the problem of multi-device display adaptation.

Disadvantages:

Compatible with all kinds of equipment, heavy workload and low efficiency

The code is cumbersome, there will be hidden useless elements, and the loading time will be longer

In fact, this is a kind of eclectic design solution, which is affected by many factors and cannot achieve the best effect.

To a certain extent, the original layout structure of the website has been changed, and the users will be confused.

Setting of 4.Meta tags

Preparation: set the Meta tag

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.