呂形布局簡介

1. 前言

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

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

2. 呂形布局

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

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

一般會把跳轉頁面、搜索、下載或者歷史記錄等功能放在上面固定在屏幕上的矩形內，可以簡單的把它理解為標題或功能區：

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

3. 漸隱漸現

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

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

4. 實現手段

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

• 中文布局 CSS 庫

這種方式不僅利于我們的學習，更加有助于我們的記憶。

然后也會帶領大家如何在不依賴于任何外界條件的情況下純手工實現呂形布局：

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

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

• 固定定位 + 漸隱漸現

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

5. 小結

大家可以記住呂形布局的抽象圖，然后在玩手機的時候可以看看都有哪些網站運用到了呂形布局。