H5适配解决方案(移动端+PC端)

一、方案一
/*CSS全局中*/
:root {
  /* 计算后 html的 font-size: 50px  */  
  font-size: 13.3333333vw;   /* font-size=50/375*100%  使用的是苹果两倍的设计 */
}

/* 防止页面过宽,限制600px,超过后固定font-size: 80px */
@media (min-width: 600px) {        
  :root {                          
    font-size: 80px;            
  }                                
} 

body,html{font-size: 0.32rem;}
/* 之后在其他样式中可以使用 rem em 来设计布局和样式 */
.div{
  background-color:red;
  height: 2rem;
  width: 3rem;
}
一、方案二
/* 全局中*/

/*css全局中*/
body,html{font-size: 0.32rem;max-width: 600px !important;}

你可能感兴趣的:(H5适配解决方案(移动端+PC端))