移動開發中固定布局

Travis 發布于2019-08-30 15:54 / 2022人閱讀

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

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

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

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開發布局

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

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

移動開發中固定布局

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

XFLY 2019-08-23 14:03 評論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