Front-end [responsive] detailed development analysis, front-end Response Analysis

Front-end [responsive] detailed development analysis, front-end Response Analysis
I. What are the problems to be solved in responsive design?

Currently, fixed layout and Adaptive Layout are common web designs that are slow to respond to. When Web pages need to be displayed on various display screens, they cannot help. Therefore, we need to design accordingly.

Advantages:

One page adapts to various display screens;

Good SEO;

Greatly shorten the development cycle;

Giving users more choices and better user experience;

2. What are the parts of the response?

When learning responsive design, we need to know the following common terms.

1. Fluid Mesh

A simple grid system uses percentage units for each grid to control the grid size. The advantage is that the grid scales proportionally with the screen size.

2. Elastic Images

An elastic image is scaled by a fluid mesh to adapt to different sizes without setting a fixed size for the image. The implementation method is as follows:

Img {

Max-width: 100%;

}

Note: In IE8, the image is not displayed. Therefore, you must add the hack style to IE8.

3. CSS3 Media Queries

It is the most critical application of responsive design. It can select a style file based on the size, direction, and screen specifications of the browser window.

4. Screen Resolution

The so-called screen resolution refers to the resolution of 1920 device pixels * 1080 device pixels, which is arranged vertically with 1080 smaller points for imaging and 1920 smaller points for imaging, on a screen of the same size, the higher the resolution (the smaller the number of imaging points on the horizontal and vertical sides), the clearer the screen.

Q: Will the 100px display of css be different on the high-definition screen and normal screen?

The answer is: no difference!

1 px occupies one device pixel under a normal screen, while 1 px occupies two device pixels under a high-definition screen (such as an apple Retina screen. For iPhone 6, the physical pixel is 750*1334, because it is a high-definition screen, so the measurement with px is 375px * 667px. This can be viewed in chrome debugging mode.

5. Main breakpoints

The breakpoint serves min-width and max-width. @ Media (min-width: 320px ){}

3. One More Thing?

1. Differences between Adaptive Layout and responsive Layout

Adaptive Layout: A common percentage layout that allows your layout to adapt to different resolutions. However, this layout requires a minimum width to assist in implementation, otherwise, the layout will be messy under a certain size, but the unfixed value is % rather than px.

Responsive layout: it is a multi-column Fluid layout that uses media queries to perfectly present web pages at different resolutions. It is essentially different from Adaptive Layout.

2. Application of em in responsive design

Em is highly correlated with font-size. It is also a unit of measurement for css, but it is more suitable for responsive design than px, it allows you to adjust the breakpoint value based on the font size.

20em = 20*16 = 320px

30em = 30*16 = 480px

@ Media only screen and (min-width: 20em ){}

@ Media only screen and (min-width: 30em ){}

3. Common css units

There are three common types: px em %

Px: The measurement unit of the browser. Relative to physical pixels, 1 px may occupy 2 physical pixels or even 3 physical pixels under the HD screen.

Em: relative to the font-size of the parent element. For example, if the font-size of the parent element is set to 16px and the font-size of the child element is set to 0.75em, the conversion to px is 0.75 * 16px = 12px;

%: Length height relative to the parent element, except position: fixed and absolute (fixed knows the first element with position set for the window and absolute relative to the recursive parent element)

Rem: relative to the font-size of the root node (generally html nodes), if the font-size is set to 100px for the html node, the element in the document is set to 0.3rem and is calculated: 0.3 * 100px = 30px

VL/vw: the visible range of the device, which is often used on mobile terminals. For example, the designer often requires that the banner occupy the full height of the first screen, which is Gb/s. For example, for iPhone 6 (375px * 677px) = (100vw * 100otherwise), while for iPhone 6 plus (414px * 736px) = (100vw * 100otherwise), The VWS and SLS on the two screens are different.

Clac: length calculation syntax in css3. It supports the calculation of +,-, *, And.

4. Three key steps for responsive design

Step 1: Set meta tags

Use the width of the device as the view width. Disable the default Adaptive Page effect and disable the zoom effect. As follows:

 

Since IE6-IE8 does not support responsive design, you need to add plug-ins to support respond. js or media-queries.js, as shown below:

 

<! -- [If lt IE9]>

<Script src = 'HTTP: // xxx/response. js'> </script>

<! [End] -->

Step 2: HTML MarkUp

The basic information includes the header, navigation, content, and footer.

Step 3: Media Query

1. Generally, min-width and max-width are used to check the resolutions of various devices.

@ Media screen and (min-width: 768px ){}

@ Media screen and (max-width: 1024px ){}

@ Media screen and (min-width: 768px) and (max-width: 1024px ){}

2. device-width is mainly used in Apple products.

@ Media screen and (min-device-width: 768px) and (max-device-width: 1024px ){}

3. Call an independent style sheet

Common templates:

1024px display: @ media screen and (max-width: 1024px ){}

Ipad horizontal screen: @ media screen and (max-device-width: 1024px) and (orientation: landscape ){}

Ipad portrait screen: @ media screen and (max-device-width: 768px) and (orientation: portrait ){}

Iphone and smartPhone: @ media screen and (min-width: 320px) and (max-width: 480px ){}

Big Screen, medium screen, small screen Division:

Small screen: <769px; @ media only screen and (min-width: 769px ){}

Mid-screen: 769 ~ 1366px or 769 ~ 1440px; @ media only screen and (min-width: 769px) and (max-width: 1366px ){}

Large Screen: 1366 ~ 1920px; @ media only screen and (min-width: 1367px ){}

For more video tutorials, please follow the public account !!!!!!!