页面自适应 —— rem布局

REM
rem 是 css 的长度单位，它是相对于 <html> 元素的 font-size 的相对值。html { font-size: 100px; }，那么 1rem 就等于 100px。

默认情况下，html 的 1rem = 16px，所以我们需要更好的计算rem，需要去设置 html 的 font-size。

方法有两种：

一： 根据页面宽度设置 rem

 

 1 (function (doc, win) {
 2     // html 考虑以及兼容了 屏幕旋转的事件
 3     var docEl = doc.documentElement, 
 4         // 判断事件orientationchange 横屏 事件  或resize 
 5         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 6         //判断事件orientationchange 横屏 事件  或resize
 7         recalc = function () {
 8             var clientWidth = docEl.clientWidth; // 获取屏幕大小
 9             if (!clientWidth) return; // 未获取屏幕尺寸     
10             // 屏幕最大宽度
11             if(clientWidth>=750){
12                 docEl.style.fontSize = '100px';
13             }else{
14                 docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; // 计算html的font-size值
15             }
16         };
17     // addEventListener 兼容判断
18     if (!doc.addEventListener) return;
19     // 屏幕大小以及旋转变化自适应
20     win.addEventListener(resizeEvt, recalc, false); 
21      // 页面初次打开自适应
22     doc.addEventListener('DOMContentLoaded', recalc, false);
23 })(document, window);

 

在这里 750 为屏幕的最大宽度，也可以是设计图的实际宽度 

 

二： 根据设备DPR动态设置 html 的 font-size

 

'use strict';   
/**
 * @param {Boolean} [normal = false] - 默认开启页面压缩以使页面高清;  
 * @param {Number} [baseFontSize = 100] - 基础fontSize, 默认100px;
 * @param {Number} [fontscale = 1] - 有的业务希望能放大一定比例的字体;
 */
const win = window;
let flex = (normal, baseFontSize, fontscale) => {
    const _baseFontSize = baseFontSize || 100;
    const _fontscale = fontscale || 1;
    const doc = win.document;
    const ua = navigator.userAgent;
    const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
    const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
    const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
    const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
    let dpr = win.devicePixelRatio || 1;
    if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
        // 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
        dpr = 1;
    }
    const scale = normal ? 1 : 1 / dpr;

    let metaEl = doc.querySelector('meta[name="viewport"]');
    if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        doc.head.appendChild(metaEl);
    }
    metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
    doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`;
};flex();

 

这是阿里团队的高清方案布局代码，所谓高清方案就是利用rem的特性，根据设备屏幕的DPR（设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由4个物理像素点组成）根据设备DPR动态设置 html 的font-size为（50 * dpr)，同时调整页面的压缩比率（即：1/dpr），进而达到高清效果。
 

**注意： 两个方法的使用环境不一样。**

方法一：屏幕越大元素越大

方法二：屏幕越大，看的越多，这个方法保证了不同设备下视觉体验的一致性。

 

参考：手机端页面自适应解决方案—rem布局进阶版（附源码示例）

 

posted @ 2020-04-10 11:09  sanyekui  阅读(378)  评论(0)  编辑  收藏  举报