rem适配

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。·

rem：

根据HTML根节点（html节点）的字体大小来确定rem的单位长度。

flexible.js

根据屏幕宽度确定html 节点的 font-size ，根据 手机dpr值设定 Viewprot scale的值

如下：iphone5s的 viewport 设置代码  （flexible.js自动生成）

本文主要来讲我现在一直采用的 flexible.js+rem解决方案 以及其他一些移动端需要注意的地方

先来一个例子

首先项目结构

_public.scss//_ 符号，写在scss文件前面，在 compass watch命令下 文件不会被编译

这个文件主要用来存放，rem（） px转像素的函数，以及一些公共的颜色变量，可复用的样式等！

**_common.scss **

主要用来引入compass/reset模块 ，同时引入_public.scs文件

style.scss

@charset"utf-8";    //设置scss文件字符编码 ，每个scss文件都需要

@import"compass/css3";    //引入 compass的css3模块

@import"common/_common.scss";   // 引入 预先编写的 _common.scss 文件

body{

        width:10rem;   //定义body的宽度充满全屏，在_public.scss 文件 和 flexible.js 文件 

                               //里面是将移动端屏幕平均划分为 10等分。没一份为 1rem；

}

header{

       width:10rem;

         height:rem(96);    //此处嘉定设计的标题栏高度为  96px ，所以写法是将  96px 的数值

                                    //传入rem（） 函数中 ，scss在编译的时候回自动将其编译成rem值

}

index.html

演示

好了基本设置完毕，可以放心的使用量到的px值来写布局了。其他的flexible.js 和 compass 会帮你搞定

请注意如下部分

_common.scss中

body{

        background-color:#eee;

        width:10rem;

         max-width:10rem;//为了屏幕超出了宽度后，页面最大值为10rem

         margin:0auto;// 屏幕超宽后 body内容居中显示

          font-size:$font22;

          font-family:Helvetica,STHeiti,sans-serif;

           color:#333333;   

          @includeuser-select(text); //用户选择操作限制，避免用户选择文本以外的范围              

           @includeopacity(0);//入场动画初始值设定

           @includetransition(all 0.5s);//入场动画效果设定

}

input,button,select{        //去掉安卓 和苹果给定的默认效果，方便自定义

         border: none;

         outline: none;   

         -webkit-appearance: none;   

         -webkit-tap-highlight-color:rgba(255,255,255,0);

         font-size:$font20;

}

项目开始编写前  ，请在 项目根目录 也就是 config.rb 目录下 启动命令行窗口（PS：shift+鼠标右键）并且输入compass watch命令，来监听scss文件变化  ，在每次保存scss 文件的时候，compass会自动编译 scss文件夹中的文件到css目录下

现行移动端多屏幕适配方案有Media Query（媒介查询） 和  rem两种，相对于Media Query来说 ，Rem 中flexible.js更适合懒人操作。

问题：

通常设计图的单位都是px，而我们使用rem单位之后，就涉及到了，px单位转换为rem单位；

在页面加载的时候，可能会出现一次闪动

px单位转rem单位解决方法

style.scss

//设计图宽度 640px 等分为10等分

/**

* rem单位长度

*/

$fontSize:64;

/**

* 将px数值转换成rem数值的函数

* @param $n px数值

*/

@function rem($n) { 

      @return ($n/$fontSize) * 1rem;

}

div{

width:rem(640);

height:rem(128);

}

参数说明：

$fontSize  rem单位长度，这是理想状态下的数值，根据设计图确定，计算方法：设计宽度/等分份数$n       

px数值,有设计标注 ，或者，页面制作前自己标注。

style.css

div{

width:10rem;

height:2rem;

}

经过compass编译之后会得到如上图的结果

当然，flexible.js 也是需要设置的，如下图部分数值需要和scss中函数的数值对应

function refreshRem() {

// var width = parseInt(window.screen.width); // uc有bug

var width = docEl.getBoundingClientRect().width;

if (!maxWidth) {

    maxWidth = 540; 

};

if (width > maxWidth) {

// 淘宝做法：限制在540的屏幕下，这样100%就跟10rem不一样了

width = maxWidth;

}

var rem = width * 100 / designWidth;

// var rem = width / 10;  // 如果要兼容vw的话分成10份 淘宝做法

//docEl.style.fontSize = rem + "px";//旧的做法，在uc浏览器下面会有切换横竖屏时定义了font-size的标签不起作用的bug

remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';

}

图中有两个640的数值，此处对应的是设计图宽度为640，

另有一处数值为10意思是将屏幕分为10等分，

次数两个数值 能得上文中

$fontSize = 640/10 = 64;

加载时屏幕闪动的问题

讲flexlibe.js文件放置在css样式文件之前加载，这样能够有效的减少屏幕闪动情况的出现

这部分来自https://www.jianshu.com/p/b4c189e3c8b4

1.我看了网上很多关于rem的资料，基本都说浏览器的默认字号就是16px，然后直接定义font-size:62.5%。但是，rem属于css3的属性，有些浏览器的早期版本和一些国内浏览器的默认字号并不是16px，那么上面的10/16换算就不成立，直接给html定义font-size:62.5%不成立。

2.chrome强制字体最小值为12px，低于12px按12px处理，那上面的1rem=10px就变成1rem=12px，出现偏差（下面给demo）。

解决方案：

将1rem=10px换为1rem=100px（或者其它容易换算的比例值）;不要在pc端使用rem。

那么上面的页面根元素样式要改为：

html {font-size: 625%;

/*100 ÷ 16 × 100% = 625%*/

}