05CSS3 new features

New features of CSS3

One, CSS3 introduction

CSS3 is an upgraded version of CSS2.1, it is an extension of CSS

Two, the main new features of CSS3

1. Selector

2. shadow

3. Shape conversion (2D<->3D)

4. Deformed

5. Animation (transition animation, frame animation)

6. frame

7. Multiple backgrounds

8. reflection

9. Text

10. Color (RGBA/HSL/HSLA)

11. Filter

12. Flexible layout

13. Multi-column layout

14. Box model

15. web font

16. Media inquiries

Three, CSS3 limitations

CSS3 is not supported by all browsers or different versions of the same browser, all need to do compatibility processing, the usual practice: add the prefix of the manufacturer

1. Mainstream browser kernel

• Trident: IE core

• Webkit: Chrome and Safari kernel

• Gecko: FireFox kernel

• Blink: Chrome and Opera kernel

Tips:

At present, most of the domestic browsers are dual-core (IE core + Chrome core)

2. Vendor prefix

• IE: -ms-

• Chrome&Safari: -webkit-

• FireFox: -moz-

• Opera: -o-

Four, responsive layout

1. Responsive layout concept

Responsive Design, different display methods for browsing web pages on terminals with different screen resolutions

Responsive design can make the website have a better browsing and reading experience on mobile phones and tablets

2. The difference between responsive layout and adaptive layout

• Responsive layout only develops a set of code. By detecting the resolution of the viewport, code processing is performed on the client for different clients to display different layouts and contents.

• Adaptive layout requires the development of multiple sets of interfaces. By detecting the resolution of the viewport, it can be judged whether the currently accessed device is a PC, a mobile phone or an iPad, etc., so as to request the service layer and return to different pages.

• Responsive layout is equivalent to fluid grid layout, and adaptive is equivalent to using fixed split points for layout

• Adaptive layout gives more design space, only need to consider a few different states, while responsive layout needs to consider hundreds of different states, although some state differences are small, but also consider

3. Implementation method of responsive layout development

• Media inquiries

• Percentage layout

• rem layout (relative to the font size layout in the root node (element) html)

• Viewport unit layout (vw/vh)

4. Responsive design steps

• Set meta tags

• Set style through media query

• Set the width of multiple views

  1. Width needs to use percentage/rem/vw&vh, etc.

  2. Handling image zoom

  3. Other attribute processing (such as: pre/iframe/video, etc., all need to be scaled)