移动端适配最佳方案

最新推荐文章于 2025-10-12 01:53:29 发布

原创最新推荐文章于 2025-10-12 01:53:29 发布 · 634 阅读

1 ·

CC 4.0 BY-SA版权

rem 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨移动端网页设计的适配方案，介绍通过JS动态调整字体大小实现响应式布局，利用设备像素比进行视口缩放，以及通过LESS变量计算不同屏幕尺寸下的元素尺寸，避免繁琐的媒体查询，实现高效且精准的页面适配。

移动端适配最佳方案-rem

JS动态计算当前屏幕每一份大小
- 设置设备像素比
- - style样式中通过比例公式计算
  - - 案例

JS动态计算当前屏幕每一份大小

缺点：切换屏幕尺寸需要刷新界面才有效，真机上测试，可忽略

document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";

设置设备像素比

通过meta的initial-scale属性来缩小
注意点：缩放视口后视口大小会发生变化
当移动端设备的CSS像素和设备像素比例不为1时，需要进行缩放

 let scale = 1.0 / window.devicePixelRatio;// 计算缩放比例
 let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maxinum-scale=${scale}, mininum-scale=${scale}, user-scalable=no ">`;
 document.write(text);

style样式中通过比例公式计算

公式：原始元素尺寸 / 原始图片每一份大小 * 目标屏幕每一份大小 = 等比例缩放后的尺寸

设计图片是150*150

如何在前端开发中应用这个计算公式
目标屏幕每一份的大小就是HTML的font-size：50px（一共有7.5份，375/7.5）
使用时只需要用原始元素尺寸 / 原始图片每一份大小rem 即可

案例

为了直接计算缩放后的尺寸，这个案例中用了less

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动端常用适配方案-不用媒体查询</title>
    <style type="text/less">
        *{
            margin: 0;
            padding: 0;
        }
        @media screen and (max-width: 320px) {
            html{
                font-size: 42.67px;
            }
        }
        @media screen and (min-width: 375px) {
            html{
                font-size: 50px;
            }
        }
        @media screen and (min-width: 414px) {
            html{
                font-size: 55.2px;
            }
        }
        .top{
            position: relative;
        }
        .top>img{
            width: 100%;
            height: auto;
        }
        .top>p{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 80/100rem;
            font-size: 36/100rem;
            color: #fff;
        }
        .middle, .bottom{
            position: relative;
            height: 290/100rem;
        }
        .main{
            border: 1/100rem dashed #0d7efb;
            border-radius: 5/100rem;
            padding: 10/100rem;
            display: inline-block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        .main>img:nth-of-type(1){
            width: 410/100rem;
            height: 270/100rem;
            vertical-align: bottom;
        }
        .main>img:nth-of-type(2){
            width: 84/100rem;
            height: 84/100rem;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 60/100rem;
        }
        .bottom{
            margin-top: 35/100rem;
        }
    </style>
    <script src="../js/less.js"></script>
    <script>
        /*
        * 注意点：通过JS动态计算当前屏幕每一份大小的好处：不用写很多的媒体查询
        * 坏处：切换了屏幕尺寸之后需要刷新界面才有效
        *       而媒体查询如果切换了屏幕的尺寸不需要重新刷新界面
        * */
        console.log(window.devicePixelRatio);
        document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
        // console.log(document.documentElement);
        let scale = 1.0 / window.devicePixelRatio;
        let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maxinum-scale=${scale}, mininum-scale=${scale}, user-scalable=no ">`;
        document.write(text);
    </script>
</head>
<body>
<div class="top">
    <img src="../images/bg.png" alt="">
    <p>实名认证</p>
</div>
<div class="middle">
    <div class="main">
        <img src="../images/back.png" alt="">
        <img src="../images/add.png" alt="">
    </div>
</div>
<div class="bottom">
    <div class="main">
        <img src="../images/back.png" alt="">
        <img src="../images/add.png" alt="">
    </div>
</div>
</body>
</html>