移动端 - 适配方案

• 1. 百分比适配
• 2. viewport 适配
• 3. rem 适配
• 4. 弹性盒模型
  • box
  • flex
• 补充
  • 获取设备宽度

1. 百分比适配

• 缺陷

  高度百分比不太好计算，不建议单独使用，配合其他方案使用

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
           

div {
    width: %;
    height: px;
    float: left
}
.box1 { background: red }
.box2 { background: blue }
.box3 { background: green }
.box4 { background: yellow }
           

2. viewport 适配

通过JS计算比例，动态生成

meta viewport

标签

• initial-scale

  初始比例

• minimum-scale

  最小缩放比例

• maximum-scale

  最大缩放比例

(function(){

    // 获取当前屏幕宽度
    var w = window.screen.width;

    // 目标尺寸宽度，设计图宽度以 640px 为例
    var targetW = ;

    // 缩放比例：当前尺寸/目标尺寸
    var scale = w/targetW;

    // 创建 meta 标签，动态设置视口
    var meta = document.createElement("meta");
    meta.name = "viewport";
    meta.content = "user-scalable=no,initial-scale=" + scale + ",minimum-scale=" + scale + ",maximum-scale=" + scale;

    // 插入 head 中
    document.head.appendChild(meta);
})()
           

3. rem 适配

• 设计图选取，以

  640px

  设计宽度为例
• 使用

  rem

  单位，根据根节点

  html

  的字体大小进行计算

// 获取 document 元素
var html = document.documentElement;

// 获取设备宽度
var deviceWidth = html.getBoundingClientRect().width;

// 设置根元素 html 字体大小，这里按 640/100 的比例计算
html.style.fontSize = deviceWidth/ + 'px';
           

• 现在，css实际尺寸与图纸尺寸比例为

  1:100

  ，

  1rem = 100px

div {
    // 设计图尺寸为100px，则css设置为 1rem
    width: rem;
}
           

4. 弹性盒模型

box

flex

补充

获取设备宽度

// 获取 html 根元素节点
var html = document.documentElement;

// 获取设备宽度
var deviceWidth1 = html.clientWidth;
var deviceWidth2 = html.getBoundingClientRect().width

// 两种方式获取的结果一样
console.log(deviceWidth1 === deviceWidth2) // => true
           

• clientWidth

  和

  getBoundingClientRect().width

  的区别