logoMasterYi
技术文章 在线工具 Antd模版 uniapp插件 关于作者
湘ICP备19018432号

    移动端适配方案

    更新时间： 2022-06-22 20:53:14
    点击量： 514
    标签： 前端移动端

    简介：手机的广泛使用，移动端机型又众多，便会在进行移动端项目前考虑到移动端适配问题

    文章均为个人原创, 搬运请附上原文地址感谢, 原文来自MasterYi博客

    学习本篇前需掌握的知识基础

    1. 例举适配方案

    1.1 transform

    • 实现的思路：通过控制body的宽作为页面宽，再通过js计算可视区域来设置 transform：scale 的缩放比来进行适配
    • 优点：可以根据设计稿px来直接来进行编写，无论任何分辨率（超小屏，超大屏）也会自动适应大小1比1的还原设计稿，无需采用媒体查询写多套减少代码量
    • 缺点：无法使用vw和vh

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform适配</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
</head>
<style>
     html { overflow: hidden;}
     * { box-sizing: border-box;}
     body { margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; transform-origin: left top; background: #f0f0f0; }
    .page { width: 750px;}

    .header { width: 750px; height: 100px; display: flex; padding: 20px; justify-content: space-between; border-bottom: 1px solid coral; }
    .header .logo { height: 60px; width: 120px; padding: 5px 0;}
    .header .logo img { width: 100%; height: 100%;}

    .header .search { width: 550px; position: relative;}
    .header .search input { width: 100%; height: 60px; font-size: 24px; border-radius: 40px; border: #FF5000 2px solid; text-indent: 30px;}
    .header .search div { background: linear-gradient(to right, #FF8D0E, #FF5000); color: #fff; border-radius: 32px; width: 128px; height: 50px; position: absolute; right: 5px; top: 5px; text-align: center; line-height: 50px; font-size: 24px;}

    .list { display: flex; justify-content: space-between; width: 720px; margin:20px auto; padding: 20px; background: #fff; border-radius: 10px;}
    .list .item { width: 80px; text-align: center; font-size: 24px;}
    .list .item img { width: 80px; height: 80px;}
</style>
<body>
<div class="page">
    <div class="header">
        <div class="logo">
           <img src="https://gw.alicdn.com/imgextra/i4/O1CN019XWXNq1aAPOVMYSiu_!!6000000003289-2-tps-167-63.png" />
        </div>
        <div class="search">
           <input placeholder="寻找宝贝店铺" />
           <div>搜索</div>
        </div>
    </div>
    <div class="list">
        <div class="item">
            <img src="https://masteryi-localhost.oss-cn-hangzhou.aliyuncs.com/blog/article/9/1.png" />
            <span>天猫</span>
        </div>
        <div class="item">
            <img src="https://masteryi-localhost.oss-cn-hangzhou.aliyuncs.com/blog/article/9/2.png" />
            <span>爆款</span>
        </div>
        <div class="item">
            <img src="https://masteryi-localhost.oss-cn-hangzhou.aliyuncs.com/blog/article/9/3.png" />
            <span>国际</span>
        </div>
        <div class="item">
            <img src="https://masteryi-localhost.oss-cn-hangzhou.aliyuncs.com/blog/article/9/4.png" />
            <span>飞猪</span>
        </div>
        <div class="item">
            <img src="https://masteryi-localhost.oss-cn-hangzhou.aliyuncs.com/blog/article/9/5.png" />
            <span>超市</span>
        </div>
    </div>
</div>
</body>
<script>
/**
 * @effect 自动适配
 * @param {number} width 设定满屏宽度
 */
function adapterFc(width){
    let render = () => {
        document.body.style.width = `${width}px`;
        document.body.style.height = document.documentElement.clientHeight / (document.documentElement.clientWidth / width) + 'px';
        document.body.style.transform = `scale(${document.documentElement.clientWidth / width})`;
    }
    render();
    window.onresize = () => render()
}
adapterFc(750);
</script>
</html>

    1.2 弹性布局

    • 目前使用最普遍的方案, 当然其他的方式也一样可以使用弹性布局进行布局, 程序解决问题不是单一手段, 而是看项目来进行搭配
    • 实现的思路：按正常设备尺寸编写，通过弹性布局的特性做等比分配和剩余空间分配，再结合css calc的计算函数， 适用于不要求1比1还原设计稿的
    • 优点：简单、快捷、能适应90%以上移动端常用设备尺寸， 特殊尺寸再使用媒体查询写即可
    • 缺点：超小设备有挤压感、大设备有空缺，因为主要使用弹性布局做空间分配，在不同尺寸设备无法 1比1 根据尺寸还原设计稿、 应对平板等特殊设备得配合媒体查询 或者 另立项目

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性布局适配</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
</head>
<style>
     * { box-sizing: border-box;}
     body { margin: 0; padding: 0; background: #f0f0f0;}
    .page { width: 100%;}
    .header { width: 100%; height: 50px; display: flex; padding: 10px; justify-content: space-between; border-bottom: 1px solid coral;}
    .header .logo { height: 30px; width: 62px; padding: 3px 0;}
    .header .logo img { width: 100%; height: 100%;}

    .header .search { width: calc(100% - 80px); position: relative;}
    .header .search input { width: 100%; height: 30px; font-size: 12px; border-radius: 20px; border: #FF5000 1px solid; text-indent: 15px;}
    .header .search div { background: linear-gradient(to right, #FF8D0E, #FF5000); color: #fff; border-radius: 32px; width: 72px; height: 24px; position: absolute; right: 3px; top: 3px; text-align: center; line-height: 24px; font-size: 12px;}

    .list { display: flex; justify-content: space-between; width: calc(100vw - 20px); margin:10px auto; padding: 10px; background: #fff; border-radius: 10px;}
    .list .item { width: 40px; text-align: center; font-size: 12px;}
    .list .item img { width: 40px; height: 40px;}
</style>
<body>
<div class="page">
    <div class="header">
        <div class="logo">
           <img src="https://gw.alicdn.com/imgextra/i4/O1CN019XWXNq1aAPOVMYSiu_!!6000000003289-2-tps-167-63.png" />
        </div>
        <div class="search">
           <input placeholder="寻找宝贝店铺" />
           <div>搜索</div>
        </div>
    </div>
    <div class="list">
        <div class="item">
            <img src="https://masteryi-localhost.oss-cn-hangzhou.aliyuncs.com/blog/article/9/1.png" />
            <span>天猫</span>
        </div>
        <div class="item">
            <img src="https://masteryi-localhost.oss-cn-hangzhou.aliyuncs.com/blog/article/9/2.png" />
            <span>爆款</span>
        </div>
        <div class="item">
            <img src="https://masteryi-localhost.oss-cn-hangzhou.aliyuncs.com/blog/article/9/3.png" />
            <span>国际</span>
        </div>
        <div class="item">
            <img src="https://masteryi-localhost.oss-cn-hangzhou.aliyuncs.com/blog/article/9/4.png" />
            <span>飞猪</span>
        </div>
        <div class="item">
            <img src="https://masteryi-localhost.oss-cn-hangzhou.aliyuncs.com/blog/article/9/5.png" />__
            <span>超市</span>
        </div>
    </div>
</div>
</body>
</html>

    1.3 rem 方案

    • rem 单位是指根元素的font-size: px宽度 , 例如html {font-size: 16px;} 那么 1rem = 16px
    • 因此这种方法的适配原理是：根据不同屏幕的宽度，以相同的比例动态修改html的font-size适配，并将px替换成rem，从而达到各种屏幕基本一直的效果体验
    • 实现的方案有几种：媒体查询设置常见设备rem, css预处理器less动态设置, js动态计算
    • 优点：兼容度也不错, 可以根据设计稿px来直接来进行编写，无论任何分辨率（超小屏，超大屏）也会自动适应大小1比1的还原设计稿，无需采用媒体查询写多套减少代码量
    • 缺点：在奇葩的dpr设备上表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱， 使用iframe引用也会出现问题

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rem适配</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
</head>
<style>
    * { box-sizing: border-box;}
    body { margin: 0; padding: 0; background: #f0f0f0; }
    .page { width: 750rem;}

    .header { width: 750rem; height: 100rem; display: flex; padding: 20rem; justify-content: space-between; border-bottom: 1rem solid coral; }
    .header .logo { height: 60rem; width: 120rem; padding: 5rem 0;}
    .header .logo img { width: 100%; height: 100%;}

    .header .search { width: 550rem; position: relative;}
    .header .search input { width: 100%; height: 60rem; font-size: 24rem; border-radius: 40rem; border: #FF5000 2rem solid; text-indent: 30rem;}
    .header .search div { background: linear-gradient(to right, #FF8D0E, #FF5000); color: #fff; border-radius: 32rem; width: 128rem; height: 50rem; position: absolute; right: 5rem; top: 5rem; text-align: center; line-height: 50rem; font-size: 24rem;}

    .list { display: flex; justify-content: space-between; width: 720rem; margin:20rem auto; padding: 20rem; background: #fff; border-radius: 10rem;}
    .list .item { width: 80rem; text-align: center; font-size: 24rem;}
    .list .item img { width: 80rem; height: 80rem;}
</style>
<body>
<div class="page">
    <div class="header">
        <div class="logo">
            <img src="https://gw.alicdn.com/imgextra/i4/O1CN019XWXNq1aAPOVMYSiu_!!6000000003289-2-tps-167-63.png" />
        </div>
        <div class="search">
            <input placeholder="寻找宝贝店铺" />
            <div>搜索</div>
        </div>
    </div>
    <div class="list">
        <div class="item">
            <img src="https://masteryi-localhost.oss-cn-hangzhou.aliyuncs.com/blog/article/9/1.png" />
            <span>天猫</span>
        </div>
        <div class="item">
            <img src="https://masteryi-localhost.oss-cn-hangzhou.aliyuncs.com/blog/article/9/2.png" />
            <span>爆款</span>
        </div>
        <div class="item">
            <img src="https://masteryi-localhost.oss-cn-hangzhou.aliyuncs.com/blog/article/9/3.png" />
            <span>国际</span>
        </div>
        <div class="item">
            <img src="https://masteryi-localhost.oss-cn-hangzhou.aliyuncs.com/blog/article/9/4.png" />
            <span>飞猪</span>
        </div>
        <div class="item">
            <img src="https://masteryi-localhost.oss-cn-hangzhou.aliyuncs.com/blog/article/9/5.png" />
            <span>超市</span>
        </div>
    </div>
</div>
</body>
<script>
    /**
     * @effect 自动适配
     * @param {number} width 设定满屏宽度
     */
    function adapterFc(width){
        let render = () => {
            document.documentElement.style.fontSize = `${document.documentElement.clientWidth / width}px`;
        }
        render();
        window.onresize = () => render()
    }
    adapterFc(750);
</script>
</html>

    1.4 Grid 栅格布局

    • 百分比布局，把页面宽划分为12块, 更细一点的24块, 再通过媒体查询的配合进行设备适配，这种布局方式基本上所有的ui框架都会携带, 对弱网环境有要求不想引大的UI库，也可以自行使用display:grid
    • 优点： 简单，快捷，适用于后台系统等对设计稿还原度要求不高的
    • 缺点： 对设计稿还原度要求高的无法一比一还原

    2. 结尾

    基本没有特定的某种完美方案，主要看项目的针对群体和内容再来进行选择和组合是最好的。 上述也只是例举一些解决思路，灵活一点，不要局限自己。也许明年这些方案就都被淘汰了又会出现新的替代品