The basic concept

  • The density of the screenppi: The number of pixels present on the surface of a device, usually measured in pixels per inch
  • Device independent pixeldp: a virtual pixel (such as a CSS pixel) that can be used by an application
  • Device pixel ratiodpr: Device pixel ratio = physical pixels/device independent pixels
  • CSS pixelDIPs: Used mainly in browsers to accurately measure content on Web pages

In JavaScript, you can pass

  • window.devicePixelRatioObtain the DPR of the current device
  • window.screen.widthGet device width
  • window.screen.heightObtaining device Height
  • window.userAgentAccess to the agent

Chrome mobile phone type User-defined

F12 Open the console -> Mobile Mode -> Bottom Edit -> Add Custom Device -> SaveCopy the code

Hand wash adaptation scheme

  • Only iOS DPR is judged, and Android DPR is always considered to be 1

CSS unit conversion

Based on the design, convert the units to REM. You can use the Sass macro function

Font processing

  • Expect to see more text on larger phones
  • Most font files now come with some lattice size, usually 16px and 24px
  • You don’t want 13px and 15px, or even 15.3245px, to blur the font grid

In general, the unit for paragraph text is px. Sometimes the text size also needs to be divided into scenes, such as slogan, can use REM units of measurement