There are those that are laid out:
1. Telescopic layout flex
2. The percentage of the non-stationary flow-pixel layout, content filling to both sides
3. respond to media queries layout (ultra-small screen device when: flow layout)
Thing in common: an element can only do fit the width (excluding pictures)
Adaptation scheme rem: the width and height can do adaptation (geometric scaling)
4.rem layout
By controlling the font size on the html rem to control all units of the reference value on the control page size
On page transition px 4.1 rem per unit to unit
4.2 pages produced px amount of time on the use psd turn into rem
4.3 how conversion? ? ? A convenient preset reference value is calculated 100px
4.4 adapter when setting the reference value 320px 50px count how: (640px 100px
===320px 50px）
4.5 conversion formula: value = current reference rem preset reference value / current width * width design draft device
4.6 how to change (js conversion, media queries recommendation)
flex: 1 Average distribution
First, there is display: flex; then the parent of each element flex: 1
flex-direction property determines the main direction (i.e., the arrangement direction of the project)
flex-direction:row | row-reverse | column |column-reverse;
Animation speed:
After the first Fast Slow 1.ease last very slow
2.linear uniform
3.ease-in faster and faster
4.ease-out faster and slower
5.ease-in-out speed slow down after
These five animation speed is rather special, in fact, they are to a Bezier curve
Visual window: viewport, it is unique to the mobile terminal. This is a virtual area, hosts the web page.
<Meat name = "viewport"> tag set viewport
Prevent content overflow, there are no scroll bars, to provide user experience
box-sizing:border-box;
Two-column layout tips
The left {
foat:left;
width: 100px;
height: 100px;
background: pink;
}
.Right{
/ * Make this element is absolutely insulation bfc * /
/ * Do not let other floating elements on its own * /
/ * Do not let yourself float to influence other elements * /
overflow: hidden;
}