移动web开发适配

一. 设置html 默认字体大小 
1, document . getElementsByTagName ( "html" )[ 0 ].style.fontSize = window .innerWidth / 10 + 'px' ;
2.  var htmlWidth=document.documentElement.clientWidth || document.body.clientWidth;//获取视窗宽度
     var htmlDom=document.getElementsByTagName('html')[0]; //获取html,以便对其进行操作
     htmlDom.style.fontSize=htmlWidth/10+'px';//html的font-size是屏幕宽度的十分之一

二.rem 
1rem == html 默认的 font-size;
以iPhone 6 为基准
1rem == 37.5px 

@function px2rem($px) {
   $rem: 75px;  
  @return $px/$rem + rem;
}
75px==以iPhone 6 为基准设计稿 都是*2设计的 ,所以在这里 iPhone6/7/8 == 750px*1334px
例:
$height88 : px2rem ( 88 px );
$height88 == 88/75 == 1.173333333333333 rem

三.meidia query 的使用方法
1、直接写在css样式里面   /*当宽度大于320px时，此样式才生效*/
    @media screen and (max-width:320px){
    /*css*/
}
2、<link rel='stylesheet' type='text/css' href=" " media='screen and(max-width:320px)'>
版权声明：本文为qq_36082901原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。