挪动开辟中牢固规划

2023年4月21日 116次阅读 来源: 墨白

纪录一下挪动开辟过程当中涌现的题目。
从最常见的规划提及，牢固头部或底部算是最常见的需求了
假定页面规划以下：

    <body>
        <div class="header"></div>
        <div class="main"></div>
        <div class="footer"></div>
    </body>

完成头部、底部牢固，中心转动，有三种简朴完成体式格局：

  1. fixed规划
  2. absolute规划
  3. flex规划

先从最简朴的fixed规划最先，完成体式格局以下：

        html, body {
            overflow: hidden;
            height: 100%;
        }
        .header, .footer {
            position: fixed;
            left: 0;
            height: 50px;
        }
        .header {
            top: 0;
        }
        .footer {
            bottom: 0;
        }
        .main {
            height: 100%;
            padding: 50px 0;
        }

这类规划在大多数情况下是一般显现的，但在挪动端上（iOS）position: fixed失效，会有所谓的兼容性题目；

第二种体式格局absolute完成以下：

    html, body {
            position: relative;
            height: 100%;
        }
        .header, .footer {
            position: absolute;
            left: 0;
            width: 100%;
            height: 50px;
        }
        .header {
            top: 0;
        }
        .footer {
            bottom: 0;
        }
        .main {
            height: 100%;
            width: 100%;
            padding: 50px 0;
            overflow: auto;
        }

这类体式格局在挪动端（iOS）上能正确规划

第三种体式格局flex规划以下：

        body {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .header, .footer {
            height: 50px;
        }
        .main {
            flex: 1;
            overflow: auto;
            -webkit-overflow-scrolling:  touch; /*ios转动流通*/ 
        }

flex 定位在挪动端兼容到了 iOS 7.1+，Android 4.4+,在iOS3.2~ios6.0可兼容flexbox，假如运用 autoprefixer 等东西还能够降级为旧版本的 flexbox ，能够兼容到 iOS 3.2 和 Android 2.1。

如果涉及到挪动开辟规划中遇到牢固某一部份，其余部份可转动，只管不要运用position: fixed,可用absolute替换，如果不需要斟酌兼容性，用flex更佳。

    原文作者：墨白
    原文地址: https://segmentfault.com/a/1190000017370319
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞