Mobile size problem
We know that the basic units of the front-end page are px, rem, em,
px is the basic unit commonly used in PC pages, and the relative rem is the basic unit commonly used in mobile terminals;
em is suitable for PC and mobile terminals, and its calculation method is The width of the parent node defines the length of its own em, which is not commonly used because it is not conducive to accurate calculation.
Today
I’m going to talk about the rem in the mobile terminal. I guess you have encountered such a problem:
the width I measured with the measurement tool is 1rem, which can be written into the project, which is obviously much narrower than the original web page.
This is the size issue we are going to talk about today
Pixel (the smallest indivisible unit of the image)
Resolution: 720*1280 means that it can accommodate 750 pixels in the horizontal direction and 1280 pixels in the vertical direction.
Ppi (pixcel per inch) contains
1 inch of pixels per inch ≈ 2.54 cm
5.5. inches The screen ☞ is 5.5 inches diagonally.
dpi (dot per inch) is the size
of the dot per inch that can be accommodated on a mobile phone. The human retina can only distinguish the accuracy within 300 pixels, and it looks no difference if it exceeds 300 pixels. What are the common fixed sizes
of
iphone 5/6/7 1:2
iphone 5 6 7 plus 1:3
iphone x 1:3 after converting the unit pt into pixels in ios
?
Status bar 20pt
navigation bar 44pt
list 44pt
bottom 49pt
list icon/segmenter 29pt
common spacing
8 pt
15pt
common text
title 17pt
normal 13pt
latest 10pt
Hope these data can help you, welcome to add