移动开发中固定布局

XFLY 发布于2019-08-23 14:03 / 2887人阅读

摘要：记录一下移动开发过程中出现的问题。若是涉及到移动开发布局中碰到固定某一部分，其余部分可滚动，尽量不要使用可用替代，若是不需要考虑兼容性，用更佳。

记录一下移动开发过程中出现的问题。
从最常见的布局说起，固定头部或底部算是最常见的需求了
假定页面布局如下：

实现头部、底部固定，中间滚动，有三种简单实现方式：

fixed布局

absolute布局

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更佳。

云服务器 GPU云服务器移动端布局 web移动端布局 ios开发布局 ios开发布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100015.html

移动开发中固定布局

摘要：记录一下移动开发过程中出现的问题。若是涉及到移动开发布局中碰到固定某一部分，其余部分可滚动，尽量不要使用可用替代，若是不需要考虑兼容性，用更佳。记录一下移动开发过程中出现的问题。从最常见的布局说起，固定头部或底部算是最常见的需求了假定页面布局如下：实现头部、底部固定，中间滚动，有三种简单实现方式： fix...

Travis 2019-08-30 15:54 评论0 收藏0
win10日历交互效果(进阶)

摘要：日历可视移动高亮范围本篇文章在前一个初级的基础上进行后续的体验优化目标效果鼠标在目标元素内进行移动，个块组成的圆形高亮会随之移动实现效果图原图进阶实现图技术点初级篇使用的渐变范围写法进阶篇使用的渐变范围写法第一种写法是不考虑高光范围移动 win10日历可视移动高亮范围本篇文章在前一个初级的基础上进行后续的体验优化目标效果鼠标在目标元素内进行移动，9个块组成的圆形高亮会随之移动实...

skinner 2019-08-23 13:45 评论0 收藏0
JavaScript引擎

摘要：由于这些是驱动的工具，因此它们由引擎提供支持。两个主要引擎是的和的引擎。然后，四个即时进程启动，分析并执行解析器生成的字节码。简单来说，这个引擎获取源代码，将其分解为字符串，获取这些字符串并将它们转换为编译器可以理解的字节码，然后执行它。渲染引擎和JavaScript引擎先从一张图片来理解下这两个引擎 showImg(https://segmentfault.com/img/bVb...

马龙驹 2019-08-30 15:55 评论0 收藏0
JavaScript引擎

摘要：由于这些是驱动的工具，因此它们由引擎提供支持。两个主要引擎是的和的引擎。然后，四个即时进程启动，分析并执行解析器生成的字节码。简单来说，这个引擎获取源代码，将其分解为字符串，获取这些字符串并将它们转换为编译器可以理解的字节码，然后执行它。渲染引擎和JavaScript引擎先从一张图片来理解下这两个引擎 showImg(https://segmentfault.com/img/bVb...

garfileo 2019-08-02 13:57 评论0 收藏0