移動開發(fā)中固定布局

Travis 發(fā)布于2019-08-30 15:54 / 2012人閱讀

摘要：記錄一下移動開發(fā)過程中出現(xiàn)的問題。若是涉及到移動開發(fā)布局中碰到固定某一部分，其余部分可滾動，盡量不要使用可用替代，若是不需要考慮兼容性，用更佳。

記錄一下移動開發(fā)過程中出現(xiàn)的問題。
從最常見的布局說起，固定頭部或底部算是最常見的需求了
假定頁面布局如下：

實現(xiàn)頭部、底部固定，中間滾動，有三種簡單實現(xiàn)方式：

fixed布局

absolute布局

flex布局

先從最簡單的fixed布局開始，實現(xiàn)方式如下：

        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;
        }

這種布局在大多數(shù)情況下是正常顯示的，但在移動端上（iOS）position: fixed失效，會有所謂的兼容性問題；

第二種方式absolute實現(xiàn)如下：

    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。

若是涉及到移動開發(fā)布局中碰到固定某一部分，其余部分可滾動，盡量不要使用position: fixed,可用absolute替代，若是不需要考慮兼容性，用flex更佳。

GPU云服務器云服務器移動端布局 web移動端布局 ios開發(fā)布局 ios開發(fā) 布局

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117075.html

移動開發(fā)中固定布局

摘要：記錄一下移動開發(fā)過程中出現(xiàn)的問題。若是涉及到移動開發(fā)布局中碰到固定某一部分，其余部分可滾動，盡量不要使用可用替代，若是不需要考慮兼容性，用更佳。記錄一下移動開發(fā)過程中出現(xiàn)的問題。從最常見的布局說起，固定頭部或底部算是最常見的需求了假定頁面布局如下：實現(xiàn)頭部、底部固定，中間滾動，有三種簡單實現(xiàn)方式： fix...

XFLY 2019-08-23 14:03 評論0 收藏0
win10日歷交互效果(進階)

摘要：日歷可視移動高亮范圍本篇文章在前一個初級的基礎上進行后續(xù)的體驗優(yōu)化目標效果鼠標在目標元素內(nèi)進行移動，個塊組成的圓形高亮會隨之移動實現(xiàn)效果圖原圖進階實現(xiàn)圖技術點初級篇使用的漸變范圍寫法進階篇使用的漸變范圍寫法第一種寫法是不考慮高光范圍移動 win10日歷可視移動高亮范圍本篇文章在前一個初級的基礎上進行后續(xù)的體驗優(yōu)化目標效果鼠標在目標元素內(nèi)進行移動，9個塊組成的圓形高亮會隨之移動實...

skinner 2019-08-23 13:45 評論0 收藏0
JavaScript引擎

摘要：由于這些是驅動的工具，因此它們由引擎提供支持。兩個主要引擎是的和的引擎。然后，四個即時進程啟動，分析并執(zhí)行解析器生成的字節(jié)碼。簡單來說，這個引擎獲取源代碼，將其分解為字符串，獲取這些字符串并將它們轉換為編譯器可以理解的字節(jié)碼，然后執(zhí)行它。渲染引擎和JavaScript引擎先從一張圖片來理解下這兩個引擎 showImg(https://segmentfault.com/img/bVb...

馬龍駒 2019-08-30 15:55 評論0 收藏0
JavaScript引擎

摘要：由于這些是驅動的工具，因此它們由引擎提供支持。兩個主要引擎是的和的引擎。然后，四個即時進程啟動，分析并執(zhí)行解析器生成的字節(jié)碼。簡單來說，這個引擎獲取源代碼，將其分解為字符串，獲取這些字符串并將它們轉換為編譯器可以理解的字節(jié)碼，然后執(zhí)行它。渲染引擎和JavaScript引擎先從一張圖片來理解下這兩個引擎 showImg(https://segmentfault.com/img/bVb...

garfileo 2019-08-02 13:57 評論0 收藏0