移动web开发适配秘籍Rem

• 移动web开发的特点
• Rem 布局适配原理
  • Media Query（媒体查询）
    • scss 工程使用函数计算
    • JS动态获取屏幕的宽度
    • 直接将html 的 font-size 设置成 100px

移动web开发的特点

1. 运行在手机端web页面（H5页面）： 对于手机而言，兼容HTML5所有的新特性
2. 跨平台性：可以运行在PC端、IOS端 、安卓端，
3. 基于webview：webView是移动端提供的运行JavaScript的环境，是系统渲染Web网页的一个控件，可与页面JavaScript交互，实现混合开发，其中Android和 IOS又有些不同：
4. 告别 IE 拥抱webkit：对于日常的PC开发来说，需要兼容各种各样厂商的浏览器，但是对于移动web，基本就告别了浏览器厂商的兼容性，因为移动端手机webview基本上都是基于webkit内核。
5. 更高的适配性和性能要求：程序运行在手机端，但手机屏幕尺寸各式各样，性能方面跟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的顺序，后一个覆盖前一个，这样不利于维护和代码的可读性。

  
  
   
  
  



  

    hello rem
  

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基准值：

  


  

    hello rem
  
 
 

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

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

  


  

    hello rem