UI: The user interface of the phone
UI physical version: the actual screen pixels of the phone
UI design version: the size of the mobile phone interface we took screenshots was measured in ps and found
UI magnified version: The resolution of the mobile phone is obtained by enlarging the size of the mobile phone by 1.5 times.
Responsive layout
Reason: When the form is reduced, the pictures and text will be incomplete, and the optimization is limited
Media Queries (Media Queries)
Three elements of the corresponding thinking layout: (1) fluid grid, (2) elastic image (3) media query
Three different concepts: (1) adaptive layout (2) elastic layout (3) responsive layout
Three different units: (1) px (2) em Relative length unit>1. The relative reference is the font-size of the parent element, >2. It has the characteristics of inheritance. When the font-size is not set, the browser will have A default em setting: 1em = 16px; easily confusing
(3) The relative reference of rem is the root element html, which is fixed relative to the reference, so it is better to calculate
>1. When font-size is not set, the browser will have a default rem
>2. Set: 1rem = 16px, which is consistent with em
>3.font-size:62.5% 1rem = 10px （10/16*100%）
>4.font-size:100% 1rem = 16px
Disadvantages: Some browsers are not compatible, ie8 and below are not compatible
The method to achieve compatibility with ie8 browser: write another code: font-size: 16px;