移动web开发适配秘籍Rem

移动web开发的特点
Rem 布局适配原理
- Media Query（媒体查询）

移动web开发的特点

运行在手机端web页面（H5页面）：对于手机而言，兼容HTML5所有的新特性
跨平台性：可以运行在PC端、IOS端、安卓端，
基于webview：webView是移动端提供的运行JavaScript的环境，是系统渲染Web网页的一个控件，可与页面JavaScript交互，实现混合开发，其中Android和 IOS又有些不同：
告别 IE 拥抱webkit：对于日常的PC开发来说，需要兼容各种各样厂商的浏览器，但是对于移动web，基本就告别了浏览器厂商的兼容性，因为移动端手机webview基本上都是基于webkit内核。
更高的适配性和性能要求：程序运行在手机端，但手机屏幕尺寸各式各样，性能方面跟PC相比要相对差一点，网络状况也是错综复杂。

Rem 布局适配原理

rem 是（font size of the root element），就是一个字体单位，根据 html 根元素的字体大小，实时变化。浏览器默认字体大小是 16px 。

字体单位：值根据 html 根元素字体大小而定，同样可以作为宽度，高度等单位
适配原理：将 px 替换成 rem ，动态修改 html 的font-size适配
兼容性：IOS6.1+ 和Android2.1+，基本覆盖所有流行的手机系统

rem 基准值及数值计算

基准值： html 根元素字体大小的值，默认font-size: 16px，适配需要根据屏幕尺寸动态修改html font-size，方式：Media Query（媒体查询）和 JS 动态获取

数值计算：px 值经换算得到的 rem 值，如1rem = 16px ，10rem = 160px

750的设计稿，宽高240px，字体大小24px ，使用以下方式实现适配

Media Query（媒体查询）

在一些相对简单的页面，可以使用定高宽度百分比的布局，而使用Media Query（媒体查询）和Flex布局，也基本上能够达到实现响应式布局的要求。

但是移动端屏幕尺寸太多了，针对每一个尺寸都写一套media 不太现实，写css样式时也不应该依赖css的顺序，后一个覆盖前一个，这样不利于维护和代码的可读性。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

  <title>Rem</title>

  <style type="text/css">

    .box {

      width: 10rem;

      height: 10rem;

      background-color: blue;

      font-size:1rem;

      color: #fff;

    }

    @media screen and (max-width:376px) and (min-width:321px) {

      html {

       font-size: 24px;

      }

    }

    @media screen and (max-width:320px) {

      html {

       font-size: 20px;

      }

    }

  </style>

</head>

<body>

  <div class="box">

    hello rem

  </div>

</body>

</html>

scss 工程使用函数计算

rem:37.5px 就是页面的基准值，写样式时须以一个确定的屏幕来作为参考(视觉稿), 假如视觉稿是以 iphone6 的屏幕为基准设计的，iPhone6 的屏幕大小是 375px，

@function px2rem($px){

	$rem : 37.5px;

	@return ($px/$rem) + rem;

}

/* 使用 */

.box {

	width: px2rem(240px);

	height: px2rem(240px);

	background-color: blue;

	font-size:px2rem(24px);

	color: #fff;

}

JS动态获取屏幕的宽度

以一个确定的屏幕来作为参考(视觉稿)，再通过JS动态获取屏幕的宽度，设置rem基准值：

  <style type="text/css">

    .box {

      width: 5rem;   // 以一个确定的屏幕来作为参考(视觉稿)  1rem = 37.5px

      height: 5rem;

      background-color: blue;

      font-size:1rem;

      color: #fff;

    }

   </style>

<body>

  <div class="box">

    hello rem

  </div>

</body>

 <script>

    // 获取视窗宽度

    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth

    console.log(htmlWidth);

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

    htmlDom.style.fontSize = htmlWidth/10 + 'px'

    // 监听页面 缩放事件

    window.addEventListener('resize',function(){

      let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth

      htmlDom.style.fontSize = htmlWidth/10 + 'px'     // iP6， 375 / 10 = 37.5

    })

 </script>

直接将html 的 font-size 设置成 100px

一般情况，根据px值计算rem值较为繁琐，还可以将 html 的 font-size 设置成 100px，直接将数值除以 100 在加上 rem 。

  <style type="text/css">

    .box {

      width: 2.4rem;   // 以一个确定的屏幕来作为参考(视觉稿)  1rem = 37.5px

      height: 2.4rem;

      background-color: blue;

      font-size:0.24rem;

      color: #fff;

    }

    html{

    	font-size:100px;

    }

   </style>

<body>

  <div class="box">

    hello rem

  </div>

</body>