CSS3

1.  Device pixel ratio

The resolution of iphone3 is 320x480, 1 css pixel is equal to one screen physical pixel

The resolution of iphone4 is 640x960 (Apple has launched the so-called Retina screen), the resolution is doubled, resulting in double the pixels on the same large screen, Android devices are divided into ldpi, mdpi, hdpi, xhdpi, etc. different grades

The window object has a devicePixelRatio property, which is officially defined as: the ratio of device physical pixels to device independent pixels, that is, devicePixelRatio = physical pixels / independent pixels

On the iPhone with Retina screen, the value of devicePixelRatio is 2, that is, 1 css pixel is equivalent to 2 physical pixels

Apple's iphone6 ​​is 2 times the size, generally when writing the code, the size should be divided by 2

2.  Viewport

The mobile terminal is relatively narrow. If you put the webpage on the PC side directly on the mobile terminal, it will not be fully displayed. The scroll bar will appear and the font size will be larger. You can set the viewport to zoom the webpage in this viewport so that it is in the The mobile terminal displays normally.

Generally, the following code is added when writing mobile or responsive:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Shortcut key: meta:vp+tab key

3.  The difference between rem and em

The reference point for rem is the html root element

The reference point for em is the parent element that defines the font (not recommended)

1em=16px  0.75em=12px

4.  Media Queries

@media screen and (max-width:768px){
    body{
        width:100%;
        height:100%;
        background-color:red;
    }
}
@media screen and (min-width:768px) and (max-width:1200px){
    body{
        width:100%;
        height:100%;
        background-color:green;
    }
}
@media screen and (min-width:1200px){
    body{
        width:100%;
        height:100%;
        background-color:yellow;
    }
}

5. Scalable layout

Set the flex box display:flex to the parent element

Set justify-content to the parent element to adjust the alignment of the child elements in the main axis direction. There are properties such as flex-start flex-content center space-around and space-between

Set align-items to the parent element to adjust the alignment of the child elements in the side axis direction. There are properties such as flex-start flex-content center stretch

flex is to set the number of shares that the child element occupies in the parent element of the flex box

order is to set the order of the child elements in the parent element of the telescopic box

flex-direction is to adjust the direction of the main axis and side axis. The default is row and can be changed to column

align-self is to set the ordering of special child elements

(Unfinished, update later)