在較小的屏幕上，將事物堆放到單個(gè)列中是移動(dòng)，并且通常，只要內(nèi)容保持在適當(dāng)?shù)膶挾葍?nèi)，進(jìn)一步考慮到頁(yè)面的高度。結(jié)果，長(zhǎng)沙網(wǎng)站建設(shè)注意到，在我自己的設(shè)計(jì)和許多在野外，移動(dòng)頁(yè)長(zhǎng)度往往是相當(dāng)長(zhǎng)的。這個(gè)帖子是一個(gè)建議，至少保持瀏覽器視口的高度，因?yàn)槟谠O(shè)計(jì)響應(yīng)式網(wǎng)站。

做響應(yīng)網(wǎng)站的摘錄在移動(dòng)設(shè)備上必須要高嗎？

但是如果你把它拉到你的手機(jī)上，你可能會(huì)注意到需要相當(dāng)多的滾動(dòng)才能瀏覽整個(gè)頁(yè)面。在我的Macbook上，頁(yè)面大約是4500像素高，大約是瀏覽器窗口可視高度的6倍。相比之下，在我的手機(jī)上，頁(yè)面大約是6,200像素高，或大約是可視高度的10倍。這不是內(nèi)在的壞; 沒(méi)有設(shè)計(jì)法規(guī)定您必須使網(wǎng)站在不同尺寸的設(shè)備上保持高度，但我認(rèn)為深入了解這是一個(gè)有趣的觀察。

所以有什么問(wèn)題？

再次，我不認(rèn)為整個(gè)頁(yè)面長(zhǎng)度本身是有問(wèn)題的。我已經(jīng)注意到，在許多響應(yīng)式設(shè)計(jì)中，有意義的內(nèi)容分組容易在較大的屏幕上發(fā)現(xiàn)，但是當(dāng)事情開(kāi)始在移動(dòng)屏幕上疊加時(shí)，會(huì)變得混亂。例如，在Nexus頁(yè)面上，第二部分將三個(gè)硬件功能組合在一起。在一個(gè)足夠大的屏幕上，您可以看到這三個(gè)方塊并排，并且該部分通常最終完全是瀏覽器可視區(qū)域的高度。在手機(jī)上，你最終只能看到一個(gè)塊的一個(gè)塊。當(dāng)您滾動(dòng)瀏覽頁(yè)面時(shí)，這3件事情并不是明確的，而是將它們分組在一起，而不是世界的盡頭，但也不是最佳的。

有辦法嗎

最近，我一直使用設(shè)備視口的高度作為粗略的指南，以幫助確定如何布局內(nèi)容。目的是為了解決上述問(wèn)題，可以在任何設(shè)備上同時(shí)合理地查看旨在分組在一起的內(nèi)容。在Nexus示例中，替代原始設(shè)計(jì)可能看起來(lái)像這樣。

通過(guò)大幅度縮小部分標(biāo)題和縮略圖的大小，我們可以將該部分的所有相同內(nèi)容適用于單個(gè)視口。這種變化本身可能只是一個(gè)小的增量改進(jìn)，但總的來(lái)說(shuō)，我發(fā)現(xiàn)遵循這個(gè)一般準(zhǔn)則導(dǎo)致在滾動(dòng)瀏覽移動(dòng)設(shè)備頁(yè)面時(shí)更容易遵循的布局。

退步一點(diǎn)...

沒(méi)有什么特別的設(shè)計(jì)，我剛剛向你展示。只有許多可能的布局才能實(shí)現(xiàn)相同的目標(biāo) - 將特定部分中的內(nèi)容更清晰地分組在一起。如果您決定使用視口高度作為移動(dòng)布局的指南，那么您應(yīng)該探索所有不同的方式來(lái)定位內(nèi)容。根據(jù)您的設(shè)計(jì)背景和內(nèi)容的性質(zhì)，不同的布局可能會(huì)更好。