移動端的屏幕長寬比

1. 前言

長寬比通常也決定了使用布局的方式，電腦的屏幕通常都是橫著的，也就是寬大于高，所以在 PC 端網(wǎng)站上經(jīng)?？梢钥吹絻闪胁季帧⑷胁季值榷嗔胁季?。

雖然 PC 端的寬很大，可以容納更多的列，但是高相對來說就較窄了，所以通常上下都是沒有遮擋的。

即使有 header 和 footer 也都不是固定的，只要用戶滑動鼠標(biāo)滾輪，header 或 footer 就會隨著頁面的滾動而超出屏幕之外變得不可見。

2. 移動端的橫豎屏

而移動端的寬高比剛好相反，手機(jī)通常都是豎著的，只有在看電影電視劇或者玩游戲的時候才會橫過來，甚至有許多用戶直接鎖定了豎屏，即使橫過來手機(jī)也不會發(fā)生任何變化。

這就導(dǎo)致了移動端與 PC 端的布局有很大的不同，移動端是寬太窄了，通常只能容納一個列(橫行豎列)，但是高卻很長，尤其是現(xiàn)在的全面屏，讓人感覺屏幕超級長，這時候就可以在行(橫行豎列)上動手腳了，比較常見的一種布局是上面一行和下面一行固定在屏幕的 header 和 footer，它們并不會隨著屏幕的滾動而移動，類似于這樣：

微信幾乎是大家最熟悉的軟件了，沒有了它就相當(dāng)于沒有了社交，在這樣一款用戶及其龐大的軟件上就運用了移動端最經(jīng)典的布局。
滑動好友列表最上面的灰色那欄并不會移動：

同理，下面的那欄控制著微信的會話、通訊錄、朋友圈以及設(shè)置等重要功能，它也不會被移動：

將此種布局稍微抽象一下就能得出這樣的一張圖：

最上面的那行通常被稱為 header，最下面的通常被稱為 footer，很好理解，頭和腳嘛！

3. 小結(jié)

那么接下來的章節(jié)我們將會帶領(lǐng)大家認(rèn)識一下除了微信這種布局方式，移動端還有哪些常見的布局。

本節(jié)主要介紹了移動端的橫縱比例：

• PC端設(shè)備的寬高比例
• PC端比例決定的布局方式
• 移動端設(shè)備的寬高比例
• 移動端比例決定的布局方式