AitSchool

移动端样式开发

课程概要

本课程主要讲解移动端样式的原理和开发，在微信推广营销页中，都会涉及到移动端页面的开发。

实现原理

使用 rem 自适应，rem 是 CSS3 中的一个尺寸单位，更具页面 html 标签的自豪匹配大小。比如，html 的字号 font-size 为 20px ，那么 CSS 设定的 1rem 的页面玉树实际会显示 20px 的大小，1.2 rem 会显示 24px 的大小。与 em 有点类似，但 rem 只认 html 。rem 除了作为 font-size 字号尺寸单位，还可以适用 margin、padding 及 readius 等。

知识点

本课程涉及到的主要知识点有：

  • viewprot
<meta name="viewport" content="width=device-width,initial-scale=1.0">

设置在手机上按照 1:1 缩放

  • rem.js
function resizeRem() {
  let docElement = document.documentElement;
  let width = docElement.getBoundingClientRect().width;
  let rem = width/10;
  docElement.style.fontSize = rem + 'px';
}
window.addEventListener('resize', resizeRem);
window.addEventListener('pageshow', resizeRem);

在 resizeRem 函数中，首先获取浏览器页面的宽度，然后设置 html 元素的 font-size 的大小为宽度的十分之一，这样 1 rem 的大小就等于页面的 1/10 ，10 rem 就等于页面宽度的 100% 。最后在页面初始化和页面尺寸发生变化时候执行。

  • @ppr

首先我们假设设计稿的宽度为 640px ，在上一个 rem.js 的脚本中我们把页面分成了 10 份。640px 为 10rem ，则 1px 为 @ppr 表示为多少 rem。

公式：640px/10rem = 1px/@ppr; 则：640 * @ppr = 10rem * 1; 则：@ppr = 10/640 * 1rem;

这时候如果设计稿中的某个 div 宽度为 320px，则其尺寸单位为 320 * @ppr = 320 * 10 / 640 rem = 5 rem;

我们可以在 less 中设置一个 @ppr 变量方便运算。

@divide: 10;
@pswWidth: 640;
@ppr: @divide/@pswWidth * 1rem

.test{
  width: 320*@ppr;
}

实现步骤

假设我们的设计稿宽度为 640px，我们来实现一下一个宽度为 320px 的正方形。这个正方形的宽度为设计稿的一般，那么在 rem 处理后他应该在任何尺寸的屏幕中都为屏幕宽度一半的正方形。

  1. 设置页面缩放比例
  2. 引入 rem 计算脚本
  3. 在 less 中设置 @ppr 变量并使用

设置页面缩放比例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Mobile demo</title>
</head>
<body>

</body>
</html>

引入 rem 计算脚本

js/rem.js

;
function(){
  function resizeRem() {
    let docElement = document.documentElement;
    let width = docElement.getBoundingClientRect().width;
    let rem = width/10;
    docElement.style.fontSize = rem + 'px';
  }
  window.addEventListener('resize', resizeRem);
  window.addEventListener('pageshow', resizeRem);

}();

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Mobile demo</title>
  <script src="./js/rem.js"></script>
</head>
<body>

</body>
</html>

在 less 中设置 @ppr 变量并使用

less/index.less

@divide: 10;
@pswWidth: 640;
@ppr:@divide/@pswWidth * 1rem;

.test{
  margin: 0 auto;
  width: 320*@ppr;
  height: 320*@ppr;
  background-color: #f5f5f5;
}

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Mobile demo</title>
  <script src="./js/rem.js"></script>
  <link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
  <div class="test"></div>
</body>
</html>

←