【前端库】HTML 移动端适配（推荐）

最新推荐文章于 2025-06-22 00:23:35 发布

搬砖老程

最新推荐文章于 2025-06-22 00:23:35 发布

阅读量1.2w

点赞数 7

CC 4.0 BY-SA版权

分类专栏：前端移动端适配文章标签：前端移动端适配 rem布局

本文链接：https://blog.youkuaiyun.com/weixin_41000111/article/details/79281429

前端同时被 2 个专栏收录

46 篇文章

订阅专栏

移动端适配

3 篇文章

订阅专栏

本文介绍了一种常用的移动端页面适配方案，通过简单的JavaScript代码实现基于设备宽度调整字体大小的功能，适用于设计稿宽度为750的设计，确保不同屏幕尺寸下的布局一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例单击我

上一篇文章我写了，关于移动端适配问题，传送门开，这一次也关于移动端适配问题，这个方式比较常用。我经常在公司得项目中使用

直接粘贴适配代码：

/*
 * @Author: a
 * @Date:   2017-03-11 15:08:34
 * @Last Modified by:   a
 * @Last Modified time: 2017-03-11 15:08:59
 */

'use strict';
(function(doc, win) {
    var docEl = doc.documentElement, // 获取html对象
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', // 横屏是否支持，不支持则为浏览器大小改变

        // 计算页面字体大小
        recalc = function() {
            // 获取页面宽度
            var clientWidth = docEl.clientWidth;
            // 获取不到页面宽度，直接返回
            if (!clientWidth) return;
            // 设置html字体大小(浏览器默认字体大小为16px)
            docEl.style.fontSize = clientWidth / 375 * 16 + "px";
        };
    // 不支持addEventListener,返回
    if (!doc.addEventListener) return;
    // 监听事件，获取当前html标签的字体大小
    win.addEventListener(resizeEvt, recalc, false);
    // dom内容加在完成事件
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

看看上面得代码和我上一次粘贴的代码是不是很少了，所以推荐上面得使用。

使用方式

这里本人设计图是750 得，那么我设置得基础屏幕375得适配。转换：32px 等于 1rem 这就是公式，那么我设计图120px得转换rem为3.75rem即可,计算为：120/32=3.75rem

注意

手机上面是不能看到1px转换后得rem大小，那么怎么办了？有关解决与设计图设计一样，开启传送门
记住加上meta缩放显示那些东西

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

设计师设计一个750的图就可以了，不用设计多个分辨率的，咱们前端使用这个给他适配即可
优化css和图片（这个一点我很难做到，老板觉得我们前端写个页面而已，简单，要速度即可，先给我10分钟，去把血给吐下）