现在当下移动端通常的自适应解决方案是使用rem，rem的原理是对html的根元素设置一个font-size字体大小，然后其他元素的字体大小和边距都会根据根元素的字体大小而变化。
在AngularJS开发的移动WebApp时，我们通过用rem、Less和gulp构造工具配合使用，来达到自适应的效果。
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<!-- 在写移动端页面的时候要对缩放比例进行控制 -->
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<!-- 参数解释：
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
-->
<title>webapp</title>
//引入编译后的css文件
<link rel="stylesheet" href="/css/index.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div ui-view>
<script type="text/javascript">//设置html根元素的字体大小等于屏幕的宽除以10，像素
document.getElementsByTagName('html')[0].style.fontSize = window.screen.width / 10 + 'px';
</script>
<script src="vendor/angular/angular.min.js" charset="utf-8"></script>
<script src="vendor/angular-ui-router/release/angular-ui-router.min.js" charset="utf-8"></script>
<script src="js/index.js" charset="utf-8"></script>
</body>
</html> 具体步骤
①对移动端缩放比例进行控制，加一个mate标签
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"> ②设置html根元素的字体大小等于屏幕的宽除以10，像素
以iphone6为基础，它的宽是375，除以10，就是37.5像素;
③控制台报了一个错误，说是没有引入controller,我们在script目录下建一个controller文件夹,建一个mainCtrl.js文件，
'use strict';
//引入app模块，后面有个controller函数,第一个参数是它的名字mainCtrl，后面也使用显式声明的方式,每个controller必须引入scope的服务。
angular.module('app').controller('mainCtrl', ['$scope', function($scope){ 这样引入了controller，就不会报错了。
我们还需要将所有的width,height,line-height,margin,padding等涉及长度宽度和边距的属性，编写Less函数，让其在自动化工具Gulp编译之后自动换算成rem的css形式文件。
我们仍然以iPhone6的宽度为基础换算
Less文件
//将字体换成rem形式
.fs(@px) {
font-size: unit(@px / 37.5, rem);
}
//将长度换成rem形式
.w(@px) {
width: unit(@px / 37.5, rem);
}
//将高度换成rem形式
.h(@px) {
height: unit(@px / 37.5, rem);
}
//将行高换成rem形式
.lh(@px) {
line-height: unit(@px / 37.5, rem);
}
//将外上边距换成rem形式
.mt(@px) {
margin-top: unit(@px / 37.5, rem);
}
//将外左边距换成rem形式
.ml(@px) {
margin-left: unit(@px / 37.5, rem);
}
//将外右边距换成rem形式
.mr(@px) {
margin-right: unit(@px / 37.5, rem);
}
//将外下边距换成rem形式
.mb(@px) {
margin-bottom: unit(@px / 37.5, rem);
}
//将内上边距换成rem形式
.pt(@px) {
padding-top: unit(@px / 37.5, rem);
}
//将内左边距换成rem形式
.pl(@px) {
padding-left: unit(@px / 37.5, rem);
}
//将内右边距换成rem形式
.pr(@px) {
padding-right: unit(@px / 37.5, rem);
}
//将内下边距换成rem形式
.pb(@px) {
padding-bottom: unit(@px / 37.5, rem);
} .head {
background-color: @headBgColor;
.h(40); //调用高度换算函数
.lh(40); //调用行高换算函数
.custom {
.mt(7); //调用外上边距换算函数
.pl(15); //调用内做边距换算函数
.pr(15); //调用内右边距换算函数 ![龙珠训练营task04[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)