移动端适配——REM布局学习总结

移动端适配中，我所了解的两种解决方案

Media Query（由于比较繁琐，我在开发中已经使用很少了）：

1. ：
   为不同宽度的屏幕写不同的样式，让用户使用不同设备访问同一个网站的时候，都能够得到更好的UI、UE体验。其典型的代表就是 Bootshrap 之类的响应式框架了，此类框架多如牛毛，技术实现也相对简单，只需要开发者为不同的用户开发不同的UI界面就行了,相对rem布局，Media Query布局只能通过使用%单位来自适应宽度，高度无法自适应。并且为了增强不同屏幕宽度下的用户体验，必须花很多的功夫多写几套布局来适配部分屏幕会有如下几种问题：

   1. 无法适配所有的屏幕；
   2. 适配屏幕数量越多，工作量越繁重；
   3. 如果将为不同屏幕的样式分开写，各个css文件中会有重复的部分，不利于代码复用，不分开写，代码有限的繁杂，可读性较低；

rem：

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

1. flexible.js
   根据屏幕宽度确定html 节点的 font-size ，根据 手机dpr值设定 Viewprot scale的值
   如下：iphone5s的 viewport 设置代码 （flexible.js自动生成）

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

先来一个例子

首先项目结构

┌scss┐
│    ├ common ┐
│    │        ├ _public.scss
│    │        ├ _common.scss
│    │        ├ ……
│    └ style.scss
├css┐
│   └style.css
├js ┐
│   ├ plugs┐
│   │      ├ felxible.js
│   ├
├img  ┄
├config.rb  
└html┐
     ├ index.html
     ├ ……

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

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

详细配置请跳转移动端适配——REM等比缩放学习总结

**_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: 0 auto; // 屏幕超宽后 body内容居中显示
    font-size: $font22; 
    font-family:Helvetica,STHeiti,sans-serif;
    color: #333333;
    @include user-select(text);  //用户选择操作限制  ，避免用户选择文本以外的范围
    @include opacity(0);  //入场动画初始值设定
    @include transition(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 更适合懒人操作。

问题：

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

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

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 t() {
    var t = o.getBoundingClientRect().width;
    t / i > 640 && (t = 640 * i), e.rem = t / 10, o.style.fontSize = e.rem + "px"
}

图中有两个640的数值，此处对应的是设计图宽度为640，
另有一处数值为10意思是将屏幕分为10等分，
次数两个数值 能得上文中
$fontSize = 640/10 = 64;

加载时屏幕闪动的问题

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

父文中，有关于compass 以及 flexible.js下载地址或相关介绍
前端技术 App开发记