移动端 - 适配方案

╰+攻爆jí腚メ 2022-05-26 10:10 226阅读 0赞

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

# 1. 百分比适配 #

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

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

![这里写图片描述][20180429113159860]

# 2. viewport 适配 #

通过JS计算比例，动态生成 `meta viewport` 标签

*  `initial-scale` 初始比例
 *  `minimum-scale` 最小缩放比例
 *  `maximum-scale` 最大缩放比例

(function(){ 
    
        // 获取当前屏幕宽度
        var w = window.screen.width;
    
        // 目标尺寸宽度，设计图宽度以 640px 为例
        var targetW = 640;
    
        // 缩放比例：当前尺寸/目标尺寸
        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/6.4 + 'px';

*  现在，css实际尺寸与图纸尺寸比例为 `1:100`，`1rem = 100px`

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

# 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`的区别

[20180429113159860]: /images/20220526/668fc9f1a4ef493384fc0af050278634.png