Responsive layouts-pictures, adaptive and responsive

Responsive layout:

1, keep enough white, but also hardly waste the screen area

2. What to consider: the layout of the @ percent and the EM layout, the spacing varies with the screen width

@ Text Wrapping

@ image needs to be replaced or allowed to zoom

@ Endure a design that's no longer perfect

Self-adapting layouts:

1. At each mutation point, set a maximum width for the content area, and then expand the outer space until it matches to the next mutation point

Search box:

<input type= "Search" >

Advantages:

@ Mobile Browser can change the keyboard displayed

@ Add an icon

@ When the zone is triggered, the search history is displayed

Disadvantages:

@ Change style without permission, match system style

Slider:

Precautions:

@ Slider for good touch

@ Minimum amount of data or number of slides

@ Deferred method to load data

Link:

1, at least * the PX

2. > 8px between targets

Responsive Picture:

1. Srcset Properties--WebKit, Chrome

1 <  src= ""  alt= ""  srcset= "A.jpg 480w, b.jpg 768w"/ >

2. Picture element

1 < Picture>2     <SourceSrcset="">3    <SourceMedia= "(min-width:480px)"Srcset="" >4    <imgsrc=""alt="">5 </ Picture>

3. Chrome supports images in WEBP format

4. <noscript> defines alternative content when the script is not executed

5. Image compression

@png 153kb

@gif 42kb

@jpeg 30kb

@webp 18kb---Support animations, lossy, lossless---chrome, opera

Responsive layouts-pictures, adaptive and responsive