先附上参考资料链接；
移动端适配方案(上)
移动端适配方案(下)
可伸缩布局方案
一个CSS的px值转rem值的Sublime Text 3自动完成插件。
最终测试了 lib-flexible 的用法；
测试代码如下：
html结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="rem.js"></script>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<div class="test1">
1rem === 100px
<img src="img.jpg" alt="">
</div>
<div class="test2">
2rem == 200px
<img src="img.jpg" alt="">
</div>
<div class="test3">
3rem == 300px
<img src="img.jpg" alt="">
</div>
<div class="test4">
4rem == 400px
<img src="img.jpg" alt="">
</div>
</body>
</html>css样式
div {
margin: 0.133333rem 0;
}
img {
width: 100%;
}
.test1 {
border: 0.013333rem solid red;
width: 1.333333rem;
}
.test2 {
border: 0.013333rem solid red;
width: 2.666667rem;
}
.test3 {
border: 0.013333rem solid red;
width: 4.0rem;
}
.test4 {
border: 0.013333rem solid red;
width: 5.333333rem;
}
.test5 {
border: 0.013333rem solid red;
width: 6.666667rem;
}
效果展示
iphone6
iphone6 Plus
Galaxy Note3
以上是三种设备下面的效果图；
为了测试结果是真跟效果图尺寸一样；特此，我在ps中比对了（将其他的尺寸的手机等比例放大缩小到iphone6 plus 的尺寸）一下，如下；
总结：
将方案js加入项目中，
所有的尺寸用成rem来替换；
-
rem替换快捷方法
-
sublime 的插件
-
安装 步骤
下载本项目，
进入packages目录：Sublime Text -> Preferences -> Browse 打开packges目录
复制下载的cssrem目录到packges目录里。
重启Sublime Text。
进入sublime Preferences -> packge settings -> cssrem -> setting-default 复制
进入 setting-user 将复制的文本粘贴到里面(因为webapp一般尺寸设计按照iphone6 (750px) 来设计，所以，将"px_to_rem" 值改为 75 )修改如下
-
-
{
"px_to_rem": 75,
"max_rem_fraction_length": 6,
"available_file_types": [".css", ".less", ".sass"]
}方案用法
比如 ui 给的一张 750 x 1334 的效果图（贴心的ui会直接标记尺寸大小，好喜欢有没有）
没有尺寸就自己量喽；有一张图片100px x 100px ；因为有 cssrem 插件所以直接按照真是的px宽度来写，插件会自己编译计算出750px宽度 对应的rem尺寸；