Summary of mobile adaptation

The screen size

The diagonal length of the screen is in inches. Common sizes are 3.5 inches, 4.7 inches, 5.0 inches, 5.5 inches, and 6.0 inches. 1 inch = 2.53cm

Screen resolution

Refers to the total number of physical pixels in the horizontal and vertical of the screen. Physical pixels refer to the smallest luminous unit on the screen, which is generally expressed as N * M. The screen resolution is said to be a fixed value, which can not be modified when the screen is produced. Display resolution is the physical pixel points currently used by the device, and the Settings in the computer system can be modified to display resolution. All screen resolution >= display resolution we often say 1366 * 768, 1920 * 1080, is the computer screen resolution

Common Mobile phone resolutions

The density of the screen

Pixels per inch refers to the number of physical pixels per inch on a screen.

Physical pixel

Also known as device pixel, physical pixel is a length unit, the unit is PX,1 physical pixel is a physical imaging point on the screen, is a smiling physical component on the screen, is the smallest particle size that the screen can display, it is determined by the screen manufacturer, can not be modified after the screen production. For example, iphone6 has 750 physical pixels horizontally and 1334 vertically, which can also be expressed as 750 * 1334. In plain English, resolution.

CSS pixel

An abstract unit of length on a CSS pixel, also called px, created for Web developers to accurately measure the size of content on a Web page. How many physical pixels does a CSS pixel in our code correspond to on the screen? To explore this relationship, we need to introduce a new concept: device-independent pixels

Device independent pixel

Device-independent Pixel (DIP) for short. When there is no HD screen, 1 CSS pixel for 1 physical pixel, but when there is HD screen, they do not have 1:1 relationship. On the premise of the same screen size, more physical pixels are compressed into a screen, so that the resolution is higher, the display effect is more delicate. This is Apple’s Retina screen.

The presence of device-independent pixels, even in HD, allows elements to have a normal size, keeping the code unaffected by the device, which is set by the device manufacturer according to the characteristics of the screen and cannot be changed.

Pixels than the DPR

Pixel ratio: the ratio of physical pixels to device-independent pixels of a single-direction device. You can view this ratio using window.devicePixelRatio

DPR = Physical pixels/device-independent pixelsCopy the code

The relationship between pixels

• Common Screen 1 CSS pixel = 1 Device pixel = 1 physical pixel
• Hd screen (DPR =2) 1 CSS pixel = 1 Device pixel =2 physical pixels
• Hd screen (DPR =3) 1 CSS pixel = 1 Device pixel =3 physical pixels

Let’s take the iphone6 for example, it has 750px physical pixels, 375px device independent pixels, 375px CSS pixels and the only thing we can control is CSS pixels

Bitmaps and vectors

The bitmap

It is composed of N pixels (bitmap pixels, is the smallest unit of bitmap, generally we see the picture resolution refers to the horizontal and vertical pixels), which will be distorted after amplification, common PNG, JPEG, JPG,gig

The vector diagram

Mathematically, it is defined as a series of points connected by wires, which will not be distorted when magnified. SVG is common

The image will be clear only if every bitmap pixel corresponds to every physical pixel

Em and rem

Em and REM are both units of length in CSS, and both are relative units of length, although they are slightly different

• Em is relative to the font size of the parent element
• Rem is relative to the font size of the root element

The principle of REM adaptation: when writing styles, use REM as the unit and adjust the root font size on different devices

Plan a

1. Set the perfect viewport
2. Root font = (mobile horizontal device independent pixels * 100)/design width
3. The style is in REM and the value is the design value / 100
4. Add JS code for real-time adaptation

 function adapter (){
 
    const dpWidth - document.documentElement.clientWidth

    const rootFontSize = (dpWidth * 100) / 375

    document.documentElement.style.fontSize = rootFontSize + 'px'
 }
 
  window.onresize = adapter

Copy the code

Scheme 2

1. Set the perfect viewport
2. Root font = mobile landscape device-independent pixels / 10
3. The style is in rem, and the value is the design value/(design width / 100)
4. Add JS code for real-time adaptation

 function adapter (){
 
    const dpWidth - document.documentElement.clientWidth

    const rootFontSize = dpWidth / 10

    document.documentElement.style.fontSize = rootFontSize + 'px'
 }
 
  window.onresize = adapter

Copy the code

Vw adaptation

Vw and Vh are relative units

• 1vw = 1% of the layout viewport width
• 1vh = 1% of layout viewport height

However, compatibility between VW and VH is a problem