移動(dòng)端的屏幕長寬比

1. 前言

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

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

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

2. 移動(dòng)端的橫豎屏

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

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

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

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

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

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

3. 小結(jié)

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

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

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