第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

1. 前言

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

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

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

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

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

這就導(dǎo)致了移動(dòng)端與 PC 端的布局有很大的不同,移動(dòng)端是寬太窄了,通常只能容納一個(gè)列(橫行豎列),但是高卻很長(zhǎng),尤其是現(xiàn)在的全面屏,讓人感覺(jué)屏幕超級(jí)長(zhǎng),這時(shí)候就可以在行(橫行豎列)上動(dòng)手腳了,比較常見(jiàn)的一種布局是上面一行和下面一行固定在屏幕的 header 和 footer,它們并不會(huì)隨著屏幕的滾動(dòng)而移動(dòng),類似于這樣:
圖片描述
微信幾乎是大家最熟悉的軟件了,沒(méi)有了它就相當(dāng)于沒(méi)有了社交,在這樣一款用戶及其龐大的軟件上就運(yùn)用了移動(dòng)端最經(jīng)典的布局。
滑動(dòng)好友列表最上面的灰色那欄并不會(huì)移動(dòng):
圖片描述
同理,下面的那欄控制著微信的會(huì)話、通訊錄、朋友圈以及設(shè)置等重要功能,它也不會(huì)被移動(dòng):
圖片描述
將此種布局稍微抽象一下就能得出這樣的一張圖:
圖片描述
最上面的那行通常被稱為 header,最下面的通常被稱為 footer,很好理解,頭和腳嘛!

3. 小結(jié)

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

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

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

圖片描述