High performance responsive Web development Practice Reading Notes (2) layout

Render according to the device’s system resolution, width, and disable the device’s default scaling of the page.

<meta name="viewport" content="width=device-width, initial-scale=1">
Copy the code

Each browser adds some default styles to the tags, but they don’t behave consistently, so some resetting styles need to be introduced to eliminate these differences. Use reset.css to reset styles to eliminate differences between elements in different browsers, forcing all elements to have a starting line. With normalize.css, unlike reset.css, it retains the browser default style, adds new code to make the style behave consistently across browsers, and fixes some common bugs.

Some of the styles on the page are common, for example, you don’t need UL with the browser’s default inside and outside margins, you don’t need a slide line for hyperlinks, you don’t need uniform fonts, etc. These styles are consistent across the site. These styles are maintained in global styles, named global.css.

Use CALC progressive enhancement. Padding is used to expand a’s click area to improve user experience.

[1] High-performance responsive Web development practice @ Li Guangyi