前端 - 设计稿为1080*1920，适配多种移动设备，不用rem，怎么写？

Question

问题是这样的，设计师给我的是1080宽的设计稿，某个元素宽度为944，那么我该写多少px才能适配多种设备(安卓,ios)呢？不用rem。

Answer 1

Why is there such a strange need? . . The actual effect of rem is px. . . If you don’t use rem, you still have to write in px. . . .
Solution: @media write size by size

Answer 2

Ah, another front-end friend who was cheated by an ignorant designer, I feel sad for a second.
The size of the design draft, do you think using rem can save you?

First of all, the size of 1080*1920 is the design draft size for Android or iOS development, and will not give us the size for front-end development.
If you are confident enough, you can request that the design be redesigned according to our front-end dimensions.
That is strictly according to 2 times the size of iPhone6, that is, the width is 750 and the height is arbitrary.
But it seems like you are not strong enough ~ ~

Then torture yourself and solve it in a compromise way. [The adaptation effect will be very poor]

Method 1:
Keep 375/1080. This ratio is the ratio of the actual size to the size of the design draft
If the actual size of your element is x and the size you measure is 944, then There is x/944 = 375/1080 = Haha
So, just do the math slowly~ ~

Method 2:
Modify the design draft in PS to a width of 750 by yourself, or save a picture of the design draft, then throw it into a 750-width design draft, and then measure the size
Like this, If the size of the element you measured is y and the actual size is x, then the calculation is much simpler x/y = 375/750 = 0.5

Finally

The size of the mobile page is only different from the width from 320px to 580px. Don’t care too much whether it is Android or iOS
** If the page is not necessary to be displayed on the PC, then use rem, just mobile There is no need to use media queries on the client side.
And media inquiries can cause a huge increase in workload. Use with caution. **
If you don’t use rem, you need to have a certain foundation in responsiveness. Use percentages more, use flexible box models more, and think more about how to adapt

Answer 3

Use PS to scale down the design draft
https://segmentfault.com/a/11...
Scroll down for explanations.

Answer 4

Taobao’s adaptive solution lib-flexable.js
There is also a thing that adds hotcss.js, which is similar to the one on Taobao

Answer 5

Please give the design a slap in the face. It can be said that PC and mobile terminal drafts are not interoperable, it is best to have mobile terminal design drafts

Answer 6

My front-end uses media to adapt. A page is adapted to different devices, usually with the commonly used width and height. As for em, rem, and px, there is actually no difference, but it is just a bit pretentious designer It’s just a lot of reasoning.