移动web适配

2022-08-28 12:52:49

一：移动web开发的特点：

　　1：跑在手机端的页面。（也就是H5页面，因为对于手机而言，它兼容手机的所有html5的新特性。）

　　2：跨平台性（pc，手机端）

　　3：告别IE，基于webkit。

　　4：更高的适配，性能要求。

二：移动web适配的常见方式有如下几种：

　　1：高宽100分比, 一般只用于比较简单的应用中。

<style>
    .box{
        width: 100%;
        height: 100px;
        background-color: red;
    }
    .inner{    
        width: 20%;
        height: 100px;
        background-color: yellow;
    }
    
</style>

<body>
   <div class="box">
      <div class="inner"></div>
   </div>
</body>

　　2： Media Query（多媒体查询、flex），用于一些条件设置，达到响应式布局的要求。

<style>
    .box{
        width: 100%;
        height: 100px;
    }
    .inner:nth-child(1),.inner:nth-child(3){
         background-color: yellow;
    }
    .inner:nth-child(2),.inner:nth-child(4){
         background-color: yellow;
    }
    
    /*当我的屏幕小于320时，div会排成一排。(里面的代码才会生效)*/
    @media screen and (max-width:320px){
           .inner{
                 width: 20%;
                 height: 100px;
          }
   }
   /*当我的屏幕大于321时，div会排成一竖。(里面的代码才会生效)*/
    @media screen and (min-width:321px){
           .inner{
                 width: 100%;
                 height: 100px;
          }
   }
    
</style>

<body>
   <div class="box">
      <div class="inner"></div>
      <div class="inner"></div>
       <div class="inner"></div>
   </div>
</body>

　　三：rem

　　1：字体单位，值根据html元素大小而定，同样可以作为宽高单位。一般html字体默认为16px, 故1rem = 16px。

　　　　 2：适配原理：将px替换成rem , 动态修改html的font-size适配。

　　　　 3：兼容性：Ios6 和android 2.1以上基本覆盖所有的流行手机。

　　　　 1) 用媒体查询的条件：此种不可取，因为现在机型太复杂，不可能针对每一种机型都写一套适配。（在什么都不设的情况下，默认1rem = 浏览器html font-size的默认大小16px;）

<style>
    .box{
        width: 100%;
        height: 100px；
        background-color: red;
    }
    .inner{    
        color: #fff;
    }
    /*当屏幕宽度最大条件满足于360,最小321时，将满足以下条件*/
    @media screen and (max-width: 360px)and (min-width:321px){
           html{ font-size: 20px}
    }

     @media screen and (max-width: 320px){
           html{ font-size: 24px}
    }

</style> <body> <div class="box"> <div class="inner">hello rem</div> </div> </body>

　　　　　　（2）采用js设置

rem的基准值: 1rem = 16px = html的font=size;

换算出px的rem数值是：170px= 170 / 16 rem;

<style>
    .box{
        width: 100%;
        height: 100px；
        background-color: red;
    }
    .inner{    
        color: #fff;
    }

</style> 
<body> 
　　<div class="box"> 
　　　　<div class="inner">hello rem</div> 
　　</div> 
    <script>
　　　　let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; /*获取视窗宽度*/

　　　　let htmlDom = document.getElementsByTagName(‘html‘)[0] ; 

　　　　htmlDom.style.fontSize = htmlWidth / 10 + ‘px‘; (除以任何数都是一样的，只是10比较好一点)
    </script>

</body>

　实战：　

1: 安装sass工具，npm install node-sass 安装sass文件

index.scss：

@function px2rem($px){
　　 $rem: 37.5px; (IPone6浏览器的基准值宽375 (使用的是Ipone6的尺寸设计稿）/10)
    @return ($px/$rem)+rem;
}

一般的设计稿会给ipone6的设计尺寸，一般给的尺寸都是大一倍的（如：80高 = 40px）
.box{
  width:px2rem(10px);
}

　2: app.js:

require(‘./index.scss‘);

获取屏幕宽度：

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

获取html的Dom:

let htmlDom = document.getElementsByTagName(‘html‘)[0] ;

获取html的font-size:

htmlDom.style.fontSize = htmlWidth / 10 + ‘px‘;

移动web适配

码农公寓

相关文章