CSS self-adapting layouts

Adaptive is a tedious problem, there are a lot of solutions to solve, today I recommend a fusion of various adaptive advantages of the method.

/* highly adaptive */html{font-size: 100px;} @media  screen and  (max-width: 330px) {html{font-size: 85px;}} @media  screen and  (min-width: 331px)  and  (max-width: 400px) {html{font-size:  100px;}} @media  screen and  (min-width: 401px) {html{font-size: 110px;}} *{margin: 0px; padding: 0px;list-style: none;font-family:  "Microsoft Jas Black";} body,ul,li,p,span,em,i,a{ font-family: inherit; font-size: 14px;} /* Adaptive */body.font_13,ul.font_13,li.font_13,p.font_13,span.font_13,em.font_13,i.font_13,a.font_13{font-size for font:  13px;} body.font_15,ul.font_15,li.font_15,p.font_15,span.font_15,em.font_15,i.font_15,a.font_15{font-size: 15px;} body.font_16,ul.font_16,li.font_16,p.font_16,span.font_16,em.font_16,i.font_16,a.font_16{font-size: 16px;} body.font_18,ul.font_18,li.font_18,p.font_18,span.font_18,em.font_18,i.font_18,a.font_18{font-size: 18px;} Body.font_20,ul.font_20,li.font_20,p.font_20,span.font_20,em.font_20,i.font_20,a.font_20{font-size: 20px;} body.font_22,ul.font_22,li.font_22,p.font_22,span.font_22,em.font_22,i.font_22,a.font_22{font-size: 22px;} body.font_24,ul.font_24,li.font_24,p.font_24,span.font_24,em.font_24,i.font_24,a.font_24{font-size: 22px;} @media  screen and  (max-width: 400px) {body,ul,li,p{ font-family: inherit;  FONT-SIZE: 3.7333VW;} body.font_13,ul.font_13,li.font_13,p.font_13,span.font_13,em.font_13,i.font_13,a.font_13{font-size:  3.46666VW;}     body.font_15,ul.font_15,li.font_15,p.font_15,span.font_15,em.font_15,i.font_15,a.font_ 15{FONT-SIZE: 4VW;} body.font_16,ul.font_16,li.font_16,p.font_16,span.font_16,em.font_16,i.font_16,a.font_16{font-size:  4.2666VW;} Body.font_18,ul.font_18,li.font_18,p.font_18,span.font_18,em.font_18,i.font_18,a.font_18{font-size: 4.8vw ;} Body.font_20,ul.font_20,li.font_20,p.font_20,span.font_20,em.font_20,i.font_20,a.font_20{font-SIZE: 5.333VW;} BODY.FONT_22,UL.FONT_22,LI.FONT_22,P.FONT_22,SPAN.FONT_22,EM.FONT_22,I.FONT_22,A.FONT_22{FONT-SIZE:5.8666VW;} Body.font_24,ul.font_24,li.font_24,p.font_24,span.font_24,em.font_24,i.font_24,a.font_24{font-size: 6.4vw ;}} This code solves two adaptive problems: 1, Height adaptive 2, Font Adaptive First, highly adaptive: Set a font-size for HTML elements, why do this, because there is a unit called REM, is the HTML font-size units, If its value is 100px, then 1rem=100px, depending on the width of the monitor, using the @media query statement, can dynamically change the height of REM as a unit of change. Again, the font adaptation, there is a unit called VW, it means the current screen display width/100, such as now the display is 375px wide, then 1vw=375/100, he will follow the screen automatically zoom in and small. But one problem is that the font size will be too large for horizontal screen. So also use the @media query statement, when the screen is too large, it will be replaced by PX units of the font. And the font of different font size into a class, later maintenance will be very convenient.

That's how it's done.

<p class= "font_18" style= "HEIGHT:1REM;" >hello world!</p>

This article from the "11695250" blog, reproduced please contact the author!

CSS self-adapting layouts