移動端的屏幕長寬比

1. 前言

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

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

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

2. 移動端的橫豎屏

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

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

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

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

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

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

3. 小結

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

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

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