Rem mobile terminal layout considerations

1. The overall structure of the frame layout:

   

 

 2. Note:

(A): If the column is about two layout, to be applied in a peer article aside;

Because the same level must be set in the same pattern; parent it moreover, is to be converted into an elastic section box (because the elements can be arranged in one row inside the box elastic),

Requires a fixed width which gave him set a fixed width, the other can be simply set flex = 1;

Also need to solve the height problem collapse, the two of them are set to "overflow = auto // auto // must not be hidden or other."

 

 (B): General layout of a column, write only step by step to the above frame structure; (removed aside)

Which then css style, all have a movable end mold must first be strange box model ,

section{width：100%；height：100%；padding：上 0 下 0}

article{width：100%；height：100%；overflow：auto}

Everything on the page to be rendered everything is written in the following article which can be div.

Welt appeared content phenomenon, just add padding to the article inside.

 

(C): the bottom of the footer text inside the icon word icon and regular text with the wording:

 

In fact, very simple just to convert into a flexible footer box, and then write a few inside several boxes icon, the icon and the word written in every regular text inside the box,

Each box is then converted into a flexible cartridge,

The vertical line is switched to the spindle; "column".

 

As such, mobile end rem layout easy to get! ! ! !