前端h5 页面 适配 demo

前端H5页面的适配是指将不同尺寸的设备，如手机、平板等，显示出同样的页面效果。以下是一个适配demo：

1. 使用Viewport设置页面缩放比例。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 使用CSS媒体查询调整样式。

/* 当屏幕宽度小于等于375px时，应用以下样式 */
@media screen and (max-width: 375px) {
    body {
        font-size: 14px;
    }
    .nav {
        display: none;
    }
    .menu-toggle {
        display: block;
    }
}

/* 当屏幕宽度大于375px且小于等于768px时，应用以下样式 */
@media screen and (min-width: 376px) and (max-width: 768px) {
    body {
        font-size: 16px;
    }
    .nav {
        display: block;
    }
    .menu-toggle {
        display: none;
    }
}

3. 使用REM单位相对于根元素调整布局。

html {
    font-size: 16px;
}

/* 将所有尺寸单位改为REM */
h1 {
    font-size: 2rem; /* 相当于32px */
    margin-bottom: 1rem; /* 相当于16px */
}
p {
    font-size: 1rem; /* 相当于16px */
    line-height: 1.5rem; /* 相当于24px */
}

4. 使用钩子函数根据设备类型设置字体大小。

if (/Android (\d+\.\d+)/.test(navigator.userAgent)) {
    var version = parseFloat(RegExp.$1);
    if (version > 2.3) {
        var width = window.innerWidth;
        var fontSize = Math.min(16, width / 360 * 20) + 'px';
        document.getElementsByTagName('html')[0].style.fontSize = fontSize;
    }
} else {
    // 非Android设备，根据屏幕宽度设置字体大小
    var width = window.innerWidth;
    var fontSize = Math.min(16, width / 360 * 20) + 'px';
    document.getElementsByTagName('html')[0].style.fontSize = fontSize;
}

通过以上方法，可以做到良好的适配效果，使得H5页面可以自适应不同尺寸的终端设备，获得更好的用户体验。