AngularJS开发WebApp的自适应处理方式

最新推荐文章于 2024-05-14 18:16:42 发布

xyphf_和派孔明

最新推荐文章于 2024-05-14 18:16:42 发布

阅读量1.9k

点赞数

分类专栏： AngularJS构建WebApp 文章标签： web app angularjs

本文链接：https://blog.csdn.net/xyphf/article/details/77997959

版权

AngularJS构建WebApp 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

现在当下移动端通常的自适应解决方案是使用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);
}

在编写样式的时候，只要使用@import 将以上换算文件引入到当前的less文件，在编写长宽边距等属性时，直接调用less换算函数并传入数值，即可在gulp编译后自动生成rem的单位。如下

.head {
  background-color: @headBgColor;
  .h(40); //调用高度换算函数
  .lh(40); //调用行高换算函数

  .custom {
    .mt(7); //调用外上边距换算函数
    .pl(15); //调用内做边距换算函数
    .pr(15); //调用内右边距换算函数
  }
}

⑤在index.html页面引入编译后的index.css文件即可。

xyphf_和派孔明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS开发WebApp的自适应处理方式

现在当下移动端通常的自适应解决方案是使用rem，rem的原理是对html的根元素设置一个font-size字体大小，然后其他元素的字体大小和边距都会根据根元素的字体大小而变化。在AngularJS开发的移动WebApp时，我们通过用rem、Less和gulp构造工具配合使用，来达到自适应的效果。<!DOCTYPE html><html lang="en" ng-app="app"><head>
复制链接

扫一扫