現在當下移動端通常的自适應解決方案是使用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=)