呂形布局簡介

1. 前言

顧名思義，呂字就是上面一個(gè)矩形，下面一個(gè)矩形。上面的矩形高度較小，通常固定在屏幕上，不會隨著用戶滑動手機(jī)而進(jìn)行任何的移動。

目前流行的方案一種是直接默認(rèn)顯示上欄，另一種是隨著屏幕的滑動而慢慢顯示出上欄。

2. 呂形布局

我們來展示與一下呂形布局的效果以及它的使用場景。

呂形布局抽象起來是醬嬸兒的：

一般會把跳轉(zhuǎn)頁面、搜索、下載或者歷史記錄等功能放在上面固定在屏幕上的矩形內(nèi)，可以簡單的把它理解為標(biāo)題或功能區(qū)：

上面的矩形寬度充滿屏幕，并提供一系列的按鈕，每當(dāng)點(diǎn)擊時(shí)上方矩形按鈕時(shí)下方矩形就會跳轉(zhuǎn)到另一個(gè)頁面，通常上方的一排按鈕會有其中一個(gè)高亮顯示，以告知用戶當(dāng)前所在的頁面是哪一個(gè)。

3. 漸隱漸現(xiàn)

除了上面幾種方式實(shí)現(xiàn)呂形布局外，為了增加交互效果，我們還可能會把呂形布局做成隨著屏幕的滑動而漸隱漸現(xiàn)的這么一種效果：

這種效果主要是通過了JS來獲取到屏幕的滾動距離，然后隨著距離的增加來動態(tài)控制透明度，增加了交互的趣味性。

4. 實(shí)現(xiàn)手段

一方面我們可以利用現(xiàn)有的 CSS 中文庫：chinese-layout 來快速實(shí)現(xiàn)呂形布局：

• 中文布局 CSS 庫

這種方式不僅利于我們的學(xué)習(xí)，更加有助于我們的記憶。

然后也會帶領(lǐng)大家如何在不依賴于任何外界條件的情況下純手工實(shí)現(xiàn)呂形布局：

• 固定定位法
• 外邊距的作用
• 非固定定位

作為擴(kuò)展閱讀，我們還提供了交互更加充滿趣味性的漸隱漸現(xiàn)效果：

• 固定定位 + 漸隱漸現(xiàn)

不過由于漸隱漸現(xiàn)效果必須用 JS 才能獲取到當(dāng)前頁面的滾動距離，所以這章只作為擴(kuò)展閱讀，防止沒有 JS 基礎(chǔ)的小伙伴看了懵圈。

5. 小結(jié)

大家可以記住呂形布局的抽象圖，然后在玩手機(jī)的時(shí)候可以看看都有哪些網(wǎng)站運(yùn)用到了呂形布局。