How to use 2x blueprints

it has been said that mobile design drawings should be given to things like 750pxMagne720px and so on.
our ui gave 720px the diagram. When I write it here, how can I use this?
because I found that some of his words are very small,
and if I develop on a computer, the smallest chrome has to be a 12px character, but 12px is still bigger than the word on the design drawing.

also, I use the rem layout to dynamically set the font-size,
setting of html according to the document width, but there is still no way to zoom out and put it there, how can the value of
font-size be less than 12px?

it is said that rem writes well on mobile, and it feels like a norm and a must. But what"s so good about it?
I got the blueprints of 720px and 750px. How should I write them?

I"ve heard people say that I want to add something to the meta tag, but it"s still a single pixel when I add it to the meta tag.
here is my meta tag:

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">

I hope you don"t hesitate to give us your advice! I"m much obliged!

Jun.18,2021

    The chrome browser on the
  1. computer does have a minimum 12px problem, and the mobile one doesn't seem to have (I'm mainly exposed to the h5 page embedded in app, so you can verify it yourself).
  2. The meta value of
  3. viewport appears with the retina screen (Apple 4s). In order to solve the problem of physical and logical pixels, this is usually added on mobile devices, and this has nothing to do with the constraints of 12px.
  4. The advantage of
  5. rem is that it can make pages and fonts have the effect of "proportional scaling", but it will still be converted to px and then rendered on the browser, so it is still subject to the constraints of 12px
  6. .
  7. generally, when UI gives me a 750W image, it is designed according to the iPhone 6s. The logical pixel of the 6s phone is 375 (CSS pixels), the physical pixel width is 750, and the pixel density is 2, which means that the original logical pixel is rendered with (2'2'4) physical pixels. So, if you use the 375 picture, the picture will paste.
  8. before the UI is plotted, we usually choose a limited matching phone model and draw the picture according to the physical resolution of the phone. After drawing, the front end is divided by the corresponding pixel density, which is the corresponding CSS pixel. Then, in order to have the effect of proportional scaling on phones of different sizes, rem, can be used simply by modifying the font-size of html according to the width of the page.

font size


-_ | | I often encounter the problem of this kind of font, usually I use -webkit-transform: scale (0.8); zoom like this.


related article


first find out what dpr means. http://www.html-js.com/articl. is quite good. Let's talk about the development thing, that is, Google browser can set the minimum font size, you can set the minimum font size 8px, easy to debug. And rem is not omnipotent, small screen phones will generally adapt to lower px, but many small fonts are even smaller. This problem should be taken into account. It seems that the font on the screen with a dpr of 3 will also be smaller.

Menu