移动Web适配方案

一.   MediaQuery 

   <style>
      @media screen and(max-width: 360px) and (min-width: 320px){
        
      }
      @media screen and(min-width: 361px){

      }
    </style>

 

 

---

 

二.   Rem 移动端最为适用

       1.介绍     

           与 em px相比 rem以根元素为相对大小   浏览器默为  16px (即 浏览器的 font-szie的大小为 16px)

 即 1rem=16px    若设置 

<style>
html {
    font-szie:17px;
}
</style>

      这时rem大小以17px为基准  即1rem=17px

 

2.应用

//这个 script写在全局js文件中

<script>

    //获取视窗宽度
    var htmlWidth=document.documentElement.clientHeight || document.body.clientWidth;

    //获取Dom
      var htmleDom=document.getElementsByTagName('html')[0];
      htmleDom.style.fontSize=htmlWidth/10+'px';  
  //   这个10是随便设置的 因为 要以 htmleDom.style.fontSize为基准值来计算 rem
  //  若设置过小有些浏览器无法适配
  </script>

//写在 scss文件中 

<style>
   // scss函数
   @function px2rem($px) {
     $rem:37.5;  // 计算rem的基准值 宽度/10 这里以iphone5为例 375 px/基准值 即为rem的值
   @return ($px/$rem)+rem;
   }

   .hello{
     width:px2rem(100px);
     height:px2rem(100px);
   }
 </style>