HTML5 responsive layout basics (1)

HTML5 responsive layout (1)

The layout method of mobile terminal development-fluid layout

The first time you encounter the concept of fluid layout, you will think that this concept is very high-end, but after a deeper understanding, you will find that it is actually very simple. For those who have experience in HTML desktop web development, in fact, fluid layout is Changed some hard-coded layouts on the desktop to percentages to adapt to various mobile sizes.

Flow layout can also be called percentage layout in layman’s terms, which usually includes the following points:

• Width percentage

• #Positioning percentage

• Replace px with em, and rem

• Elastic picture The reference object for setting these percentages is adapted according to the screen size of the mobile phone, and a certain effect is achieved through size adaptation.

#Why do you need to use fluid layout? Adapt to mobile terminal?

#Fixed pixel size web pages are the easiest way to match fixed pixel size displays. But this method is not a fully compatible production method for future web pages. We need some methods to adapt to unknown devices. Fixed pixel sizes (960/980) are not future proof.

#How to use percentages to layout page?

Size percentage:

Modify the web page from fixed layout to percentage layout:

Required Formula to remember: target element width / context element width = percentage width.

#PS: The width of the context element here refers to the width of the parent element associated with it, which will directly affect the width percentage of the child element.

Position percentage:

is basically similar to the size percentage, that is, the original fixed margin or Positioning distance converted into percentage

For example:

With the left side of the page 50px and the context width 320px, that is 50/320=15.625%

Reserve 5 decimal point.

##em:

The function of em is generally to set the font size, set a standard font size in its parent, and control the percentage of the font through em.

• The value of em is not fixed;

• #em will inherit the font size of the parent element.

##rem:

Although em can realize the percentage display of fonts and change the font size in proportion according to the screen size, once structural nesting occurs during the actual development process, the parent font will When the proportion changes, the font of the child element will change proportionally according to the change of the parent's font. If em is used to change the font, the calculation amount will be very large, which will inevitably cause a certain burden on development.

A new unit rem was introduced in css3, which will only change based on HTML tags.

rem stands for root em, and the root of em is html, which means the proportion changes only based on html.

##Flexible image:

Image settings width:100%, or background-size:100% 100%.

Picture setting threshold: max-width.

can set the maximum and minimum values ​​of the picture.

Of course, fluid layout is only a way to adapt to mobile terminals, and it cannot achieve the effect of responsive web pages. Later, I will introduce to you another adaptation method called media query. Only by combining the two adaptation methods can the final responsive layout effect be achieved.