移动端适配中，我所了解的两种解决方案
Media Query（由于比较繁琐，我在开发中已经使用很少了）：
-
：
为不同宽度的屏幕写不同的样式，让用户使用不同设备访问同一个网站的时候，都能够得到更好的UI、UE体验。其典型的代表就是 Bootshrap 之类的响应式框架了，此类框架多如牛毛，技术实现也相对简单，只需要开发者为不同的用户开发不同的UI界面就行了,相对rem布局，Media Query布局只能通过使用%单位来自适应宽度，高度无法自适应。并且为了增强不同屏幕宽度下的用户体验，必须花很多的功夫多写几套布局来适配部分屏幕会有如下几种问题：- 无法适配所有的屏幕；
- 适配屏幕数量越多，工作量越繁重；
- 如果将为不同屏幕的样式分开写，各个css文件中会有重复的部分，不利于代码复用，不分开写，代码有限的繁杂，可读性较低；
rem：
-
rem：
根据HTML根节点（html节点）的字体大小来确定rem的单位长度。
-
flexible.js
根据屏幕宽度确定html 节点的 font-size ，根据 手机dpr值设定 Viewprot scale的值
如下：iphone5s的 viewport 设置代码 （flexible.js自动生成）
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
本文主要来讲我现在一直采用的 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
<!DOCTYPE html> <!-- -->
<html>
<head>
<meta charset="UTF-8">
<!-- 设置字符编码 -->
<meta name='apple-touch-fullscreen' content='yes'>
<!-- 设置在苹果手机上以应用模式启动时，是否全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios 系统 作用未知 -->
<meta content="fullscreen=yes,preventMove=no" name="ML-Config">
<!-- iso 系统 作用未知 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- iso 系统 作用未知 -->
<meta name="format-detection" content="telephone=no,email=no,address=no" />
<!-- 是否识别 手机号码、 电子邮件 地址 等-->
<title>演示</title>
<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入 flexible.js 必须在css之前引入 ，否则会引起屏幕闪烁 -->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!-- 引入编译好的css -->
</head>
<body>
</body>
</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 更适合懒人操作。
问题：
通常设计图的单位都是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 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开发记
