4 mobile terminal adaptation methods

1.@media screen realizes the adaptability of web page layout

Advantages: No plug-ins are required, it can adapt to various window sizes, just Add the @media screen attribute to CSS.

Official documentation: @media can set different styles for different screen sizes. Especially if you need to set up a responsive page, @media is very useful.

Syntax: @media mediatype and|not|only (media feature) { CSS-Code; }

/* 屏幕宽度大于 1200px 则 h5 的字体颜色是black */
h5{
    color: black;
  }
@media screen and (max-width: 1200px){
  h5{
    color: #eee;
  }
}
/* h5字体颜色为红色，屏幕宽度只有在869px 与900px之间生效 */
@media screen and (min-width: 869px) and (max-width: 900px){
  h5{
    color: red;
  }
}
/* 屏幕宽度小于 320px 则 h5 的字体大小是20px */
@media only screen and (max-width: 320px){
  h5{
    font-size: 20px;
  }
}

Then I started to contact the mobile terminal adaptation.

2.rem adaptation

This method is an original article by CSDN blogger "sxs1995", blog.csdn.net/sxs1995/art…

The calculation unit is 640px = 6.40rem,

When the width of the design draft is 750px, i = 750; When the width of the design draft is 640px, i = 640.

Disadvantages: When the page is loaded for the first time, the line will flash for 1-2 seconds, and the user experience of previewing on the mobile phone is not good

!function(n){
  var  e=n.document,
  t=e.documentElement,
  i=720,
  d=i/100,
  o="orientationchange"in n?"orientationchange":"resize",
  a=function(){
    var n=t.clientWidth||320;n>720&&(n=720);
    t.style.fontSize=n/d+"px"
 };
  e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

3. Use @media to implement rem adaptation

Advantages: When the screen width changes, you only need to modify the font-size in the Html element to adapt

/* 不同屏幕宽度，设置不同的font-size */
@media screen and (width:750px){html{font-size:100px}}
@media screen and (width:749px){html{font-size:99.87px}}
@media screen and (width:748px){html{font-size:99.73px}}
...
@media screen and (width:321px){html{font-size:42.8px}}
@media screen and (width:320px){html{font-size:42.67px}}

4. Use vw to customize rem adaptive layout

I saw author JowayYoung’s article on flexible use of CSS development skills on Nuggets. One of them is: Use vw to customize rem adaptive layout

Advantages: Using rem layout on the mobile terminal requires setting the font-size of different screen aspect ratios through JS. Combining vw units and calc() can break away from the control of JS

/* 基于UI width=750px DPR=2的页面 */
html {
  font-size: calc(100vw / 7.5);
}

Currently, I have used all the above methods. Considering the amount of code, I mainly use vw to customize the rem adaptive layout. Do you have any other better suggestions? I will refer to it carefully, thank you.

Recommended tutorial: "CSS Tutorial"

The above is the detailed content of 4 mobile terminal adaptation methods. For more information, please follow other related articles on the PHP Chinese website!