Introduction to HTML5, CSS3 and responsive design

First, the definition of responsive design

　　Combine three existing development techniques (elastic grid layouts, elastic images, media, and media queries) and name them as responsive web design. The true responsive design approach is not just about changing the layout of the page based on the viewport size. Instead, it is going to subvert our current

Methods for designing Web pages. We used to do a fixed-width design for the desktop, then zoom it out and rearrange the content for small screens, and now we should design for the small screen and gradually enhance the design and content (progressive enhancement) for the big screen.

Ii. H5 and CSS3

HTML5 provides more semantic tagging, reduces page load times, H5 greatly improves page interactions such as form submissions, reduces complex JS code, and allows us to create more concise and fast code;

CSS3 is an additional modular construction, not a standard. It won't break anything in the browser that can't parse it

CSS3 's media query is an integral part of responsive design, and its other functions such as gradients, projections, fonts, animations, and transformations are simpler than JS.

Third, commissioning test

1. Change the browser window size to complete most tests

2. Third-party plug-ins and browser extensions are available that allow you to set the current browser window or viewport to a specified pixel. If necessary, you can also automatically toggle the current browser window or viewport into the default size, such as 1024x768 pixels. This allows you to easily test site effects on different screen viewport sizes.

　Note : In a responsive web design, do not crush pixel (px) units and use relative units of measure (em or percent).

The viewport refers to the content area within the browser window, and does not include toolbars, tab bars, etc., which are the areas where the page is actually displayed;

Screen size refers to the physical display area of the device

Introduction to HTML5, CSS3 and responsive design