移动适配

目录

• 移动适配
  • 目录
  • 概述
  • rem
    • 媒体查询
    • 根标签字号的取值
    • 元素宽高取值的确定
    • 使用步骤
    • flexiblejs适配所有移动端视口宽度的解决方案
  • vwvh
    • 计算示例
    • 元素宽高取值的确定

概述

传统的像素单位和百分比布局都存在一定的问题，像素单位会把元素的尺寸写死，在pc端多少像素，移动端也是多少像素，百分比布局虽然可以根据设备屏幕的宽度实现宽度的自适应，但是其高度仍然必须指定一个像素，不能做到同时自适应改变宽和高以适配不同机型的屏幕

移动适配就是让网页根据不同机型的屏幕宽度，自适应的改变网页中元素的宽高、边距、字号大小

• 两种解决方案
  • rem:目前多数企业(小米)在使用的解决方法
  • vw/vh:未来的解决方案,大厂(bilibili、天猫)已经开始使用

rem

• rem是一个相对单位
• rem是相对于根标签(HTML标签)的字号计算的
• 1rem=1HTML字号大小

媒体查询

• 媒体查询能够检测视口的宽度，然后编写差异化的css样式

• 写法

  @media (媒体特征){
      选择器{
          css属性;
      }
  }
  

根标签字号的取值

实现移动适配的关键在于如何给根标签的字号取一个合适的值,要实现这一点需要用到的技术就是媒体查询
目前rem布局方案中，根标签的字号一般取视口宽度的$\frac{1}{10}$

• 示例

  @media (width:414px){
      html{
          font-size:41.4px;
      }
  }
  @media (width:375px){
      html{
          font-size:37.5px;
      }
  }
  

元素宽高取值的确定

假设设计稿是根据iPhone6/7/8的视口宽度365px设计的，第一步应该是计算并设置根标签的字号大小html{font-size:36.5px;},然后假设测量某元素的宽高是63px，42px，那么其宽就应该是$\frac{63}{36.5}=1.726rem$;高就应该是$\frac{42}{36.5}=1.150rem$;

• 宽高的自动计算可以使用less插件

使用步骤

• 先给html标签设置字号

  @media (width:375px){
      html{
          font-size:37.5px;
      }
  }
  @media (width:414px){
      html{
          font-size:41.4px;
      }
  }
  @media (width:375px){
      html{
          font-size:37.5px;
      }
  }
  

• 盒子宽高使用为rem单位

  .box{
      width:5rem;
      height:5rem;
      background-color:green;
  }
  

flexiblejs适配所有移动端视口宽度的解决方案

• flexible.js是手机淘宝开发出的解决方案
• 原理就是根据不同的视口宽度自动修改根标签字号大小
• 一般把这个js放在body的结束标签位置之前

vwvh

• vw/vh是一个相对单位
• 相对视口的尺寸计算
• vw(viewport width) 1vw=$\frac{1}{100}$视口宽度
• vh(viewport height) 1vh=$\frac{1}{100}$视口高度
• 一般对一个盒子，指定其宽高时，不同时使用vm vh单位，否则根据竖屏设计的网页，到了宽屏就会比例失调

计算示例

元素宽高取值的确定

假设设计稿是根据iPhone6/7/8的视口宽度365px设计的，假设测量某元素的宽高是63px，42px，那么其宽就应该是63/3.65vw 高就应该是42/3.65vw