Responsive web front-end layout that adapts to all resolutions

Me, a PHP developer. Recently the company wanted to build an app, but the key issue was that there was no web developer, and I had a fair amount of free time, so I picked up the gun and went into battle. Responsive layout, on the web side? For PHP I had always used the tp framework, and for the web the first thing that came to mind was the bootstrap framework. I had only casually read about it and had never really practiced it — bootstrap turned out to be much easier to use than I imagined. The key thing is, here comes the key point… the app side is phones only, there are basically no PCs. That means it can only be developed for mobile, so bootstrap’s responsive layout does not apply to the app (anyway, I built a half-finished set and it got rejected). I could not work happily anymore, and it was a very restless time… Baidu, and asking colleagues again, I discovered amaze ui, that is, the “girl” framework, and finally I could save myself some trouble. So happy. After downloading the amaze framework, it is an extremely frustrating sample package: the file inclusions are introduced separately, and if you do not read the documentation carefully you will suffer greatly (because that is exactly what happened to me — so torturous). Alright, here are the files to include for amaze, for everyone’s reference. By the way, on the mobile side you need to add this line in the head

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Everything is ready, so let’s get straight to the point. The current minimum width for mobile is 300. But honestly, there probably is no smartphone with a 300 screen, so let’s design the web based on the iPhone 4’s 320. Then here comes the problem: what if the reference mockup the designer gives you is 640? Divide all the pixels by 2, and everything is solved. Using the amaze framework cannot solve the pixel problem across different resolutions very well, and the most painful part is having to set up a lot of @media only screen and (min-width:320px) and (max-width:480px) {} screen-range styles. Too painful, unbearable… Is there some method that can control this? How does JD do it? How does Xiaomi do it? Baidu it, find all the answers from Baidu. There are so many answers, let’s filter them slowly… And so I found this piece of code Then here comes the problem: this is only for the page. I want everything to adapt across browsers of different sizes — how do I solve that? clientwidth is used to get the width displayed on the screen; set the minimum screen to 320 and use 320 as the base, then the smallest font size is 12px. So there was a modification. Alright, now no matter what browser it is, the widest is 320 and the smallest font is 12px as the baseline. Next there is another question: what unit should all the layouts use? px/em/pt/rem. px is the most precise unit, a fixed value. The em value is not fixed; it inherits from the parent element. rem is still a relative size when setting an element, but it is relative to the html root element. pt is a unit from the printing industry, though it is also used in app development. So then, which one should be used? Let’s first look at the effect of the adaptive js above. An inline font style is generated in the html element, and there is your answer.