Initial look responsive layout and initial look Layout

Initial look responsive layout and initial look Layout

As more and more display terminals with different resolutions and sizes appear on the market, more and more problems have been encountered in dealing with all devices by using a plate web page design and layout, the layout of pages developed for wide screen devices on mobile phones or tablets may lead to various misoperations or bugs, greatly reducing the user experience.

Responsive layout is a design method to cope with such situations. Its core concept is to apply different styles and designs to different device widths. Responsive web design (RWD): the basic design concept is:

1. media query Technology Using CSS

2. fluid layout (fluid grids)

3. Adaptive Image/video and other resource materials

In addition, remember to include frequently used labels:

<Link type = "text/css" rel = "stylesheet" href = "css/normalize.css">

<Meta name = "viewport" content = "width = device-width, height = device-height, initial-scale = 1.0">

<Meta http-equiv = X-UA-Compatible content = "IE = edge">

1, Based on what template?

Currently, web development is generally based on PCs, and the display size is generally 13-inch or above. Therefore, the template size is usually greater than pixel PX, while the display width of Apple mobile phones is at 320px, to adapt to this change in width, the webpage layout may change when the width is 320px-20.px.

You can develop different pages based on the designer's design drawing, for example, you can develop pages based on the design drawing of pixel PX width, 800px width, and 320px width.

2, Modify different parts of the page?

The page can be divided into three parts: the header, the subject, and the footer. Each part may have different degrees of response to resolution changes. For example, the header can have different la s in 320 480 800, the subject has its own layout at 600 and 1000, which is no problem.

3, Resolution Unit

Frontend often deals with three pixel units during development, rem em and px. The following describes the differences among the three resolutions:

PX

Pixel (Pixel ). The unit of relative length. Pixel px is relative to the screen resolution of the monitor.

PX features

1. IE cannot adjust the font size that uses px as the unit;

2. Most foreign websites can be adjusted because they use em or rem as the font unit;

3. Firefox can adjust px and em, rem, but more than 96% of Chinese users use IE browser (or kernel ).

EM

Em is the unit of relative length. The font size relative to the text in the current object. If the font size of the text in the row is not set manually, the default font size is relative to that of the browser.

EM features

1. The em value is not fixed;

2. em inherits the font size of the parent element.

Note: The default font height of any browser is 16 PX. All unadjusted browsers match: 1em = 16px. Then 12px = 0.75em, 10px = 0.625em. To simplify font-size conversion, you must declare Font-size = 62.5% in the body selector in css, which changes the em value to 16px * 62.5% = 10px, so that 12px = 1.2em, 10px = 1em, that is, you only need to divide your original px value by 10, and then change to em as the unit.

Therefore, when writing CSS, pay attention to the following two points:

1. Declare Font-size = 62.5% in the body selector;

2. Divide your original px value by 10 and change it to em as the unit;

3. recalculate the em values of the enlarged fonts. Avoid repeated statement of font size.

That is, to avoid 1.2*1.2 = 1.44. For example, if you declare in # content that the font size is 1.2em, the font size of p can only be 1em, not 1.2em, because this em is not em, it becomes 1em = 12px because it inherits the font of # content.

REM

Rem is a new relative unit (root em, root em) added to CSS3, which has aroused widespread attention. What is the difference between this unit and em? The difference is that when rem is used to set the font size for the element, it is still the relative size, but it is only the HTML root element. This Unit combines the advantages of relative size and absolute size. With this unit, you can adjust all font sizes proportionally by modifying only the root element, it can also avoid the chain reaction of compound font size layer by layer. At present, all browsers except IE8 and earlier versions support rem. For browsers that do not support it, the solution is very simple, that is, to write an absolute unit statement. These browsers ignore the font size set with rem. The following is an example:

P {font-size: 14px; font-size:. 875rem ;}

Note: Selecting the font unit is mainly determined by your project. If your user group uses the latest version of the browser, rem is recommended. If compatibility is to be considered, px is used, or use both.

Px and rem options?

If you only need to adapt to a small number of mobile phone devices and the resolution has little impact on the page, use px.

To adapt to various mobile devices, use rem. For example, you only need to adapt to devices with relatively different resolutions, such as iPhone and iPad.

 

Source: http://www.runoob.com/w3cnote/px-em-rem-different.html

 

Due to this difference, when creating a responsive layout page, we should first select the rem unit relative to the root size, and set font-size to 62.5% in html, in this way, 1rem is equivalent to 10px.

 

4, Adaptive Layout

When making responsive la S, we often use adaptive la s because mobile devices are varied and the screen width is not standardized, therefore, the adaptive page that can change the width as the screen is stretched must be based on the solid-state width layout.

Therefore, when making an Adaptive Layout, we should try to avoid the use of a fixed height, but the percentage width and height. In the multi-column layout, we can use calc () to layout the content, for example, calc (% 50-20rem); you can also layout sub-elements. For example, when three columns are laid in div, you can set the size of each sub-element to calc (100%/3 ), note thatSet font-size: 0 in the parent ElementOtherwise, the space between child elements will be calculated as character units, resulting in gaps between child elements, resulting in dislocation.

For some elements that you want to float, you can also use display: inline-block to replace float: left. If you want the image and other elements to be in the same room, you can set display to block, then set margin to 0 auto.

 

5, Media query

Media query is the core of responsive layout. Syntax:

@ Media only screen and (max-width: 50em ){

[Content]

}

That is, when the screen width is PX (50*16), this style is adopted on the page. The style in curly brackets will overwrite the default style, but will not be overwritten, therefore, you can perform operations on the required attributes. It should be noted that em rather than rem units should be used here. The value and unit here are not affected by the font-size in html or body because they are read from the browser, the conversion ratio is always.

 

6, Adaptive Image

Use the srcset attribute or picture label to use files of different resolutions for images in different locations.