How do you accomplish the adaptation of the mobile terminal? Adapt to each terminal

the models of many mobile phones on mobile, use

@ media only screen and () and () {}

to achieve, but how to know the screen width of various mobile phones? Every time I adjust it, I find that there is always a wrong style on the phone, and some phones are not full of screens and are ugly.
I am using rem before I found a feeling on the Internet is not very good, I heard that Taobao a set of rem adaptation is not bad.
how do you accomplish your mobile adaptation?

@media only screen and (min-width: 100px) and (max-width: 370px) {}
@media only screen and (min-width: 370px) and (max-width: 390px) {}
@media only screen and (min-height: 610px) and (max-height: 650px) {}

I wrote these three, which should be wrong, because I can control two different models of mobile phones in one. Please teach me how to write this
@ media, and thank you for the model of the phone.

Jul.15,2022

postcss-pxtorem with amfe-flexible .
it is convenient to write px package to rem directly in the project.


the width of the display device has a certain specification. Enter the developer mode of the browser and adjust it to the mobile device, which can simulate various device sizes.

clipboard.png


vw
amfe-flexible
rem
lib-flexible
postcss


media viewport rem vw vh


vwrem


html { font-size:13.333333vw}rem

@


vwrem


clipboard.png
We use postcss to convert px to vw, which feels good. ViewportWidth is set to the width of the design drawing, regardless of the rest. The px of the elements in the design drawing is written in the program, and the postcss plug-in automatically converts according to the width of the phone. The principle of
transformation is actually similar triangles. Cut width (px): design width (px) = vw to be converted: 100vw


if you write it, the first small mobile end is 320px's iphone5/SE, without your 100px. Of course, there are also small ones, the smallest generally adapts to 300px, and then the largest mobile phone size will be less than 750px. If you have an ipad tablet, you have to consider the size of 768px and 1024px. You can go to Baidu or csdn to search for mobile adaptation methods, there will be a suitable method

Menu