網(wǎng)站設(shè)計(jì)師通常一直是大人物，因?yàn)樗麄兿矚g在他們面前擺著非常大的屏幕。這很方便，讓你感到非常專(zhuān)業(yè)。在我生命中的這一點(diǎn)上，我認(rèn)為我也不能回到只有一臺(tái)顯示器的狀態(tài)。但是，我發(fā)現(xiàn)許多網(wǎng)站都無(wú)法實(shí)現(xiàn)大屏幕，甚至是高清分辨率手機(jī)所帶來(lái)的潛力。

　　這是因?yàn)槲覀兩钤谝粋€(gè)以移動(dòng)為先的世界中，以移動(dòng)為先的人們。他們走到很遠(yuǎn)的地方，例如“外面”等異國(guó)情調(diào)的地方，因此必須隨身攜帶屏幕。外部人員幾乎是直接或間接支付我們的賬單，我們必須使他們可以在這些小屏幕上實(shí)際使用的網(wǎng)站。

　　這一切都很好，而且很快就不會(huì)改變。但是大屏幕也無(wú)處可去。人們?nèi)匀辉谵k公室，家里和帶有筆記本電腦和臺(tái)式機(jī)的咖啡店工作。人們?cè)诩抑腥匀粨碛屑彝ビ?jì)算機(jī)、PC游戲玩家存在，他們正在與攝影師和攝像師一道購(gòu)買(mǎi)一些最大的屏幕。

　　這些人通常會(huì)獲得中檔到小屏幕設(shè)計(jì)的體驗(yàn)。這可能不會(huì)破壞他們的經(jīng)驗(yàn)，但是為什么他們不應(yīng)該擁有適合他們需求的經(jīng)驗(yàn)?zāi)?此外，如果不使用它，多余的屏幕空間又是什么呢?以下是一些利用較大屏幕的方法，以及一些示例：

　　1.文字大圖片

　　人們嘗試用盡空白空間的最常見(jiàn)方法之一就是在其中放置圖片。我們都已經(jīng)看到了數(shù)十萬(wàn)個(gè)網(wǎng)站(可能有些夸張)，它們使用一些圖片作為背景，尤其是在主頁(yè)的部分。這無(wú)處不在。

　　它并不是解決問(wèn)題的最壞方法，也不是最好的方法。盡管圖像壓縮越來(lái)越好，但是這些圖像仍然會(huì)在帶寬，緩存或不緩存方面給你帶來(lái)打擊。如果你想為你和CDN省去一些麻煩，請(qǐng)使用SVG。我知道，我一直這么說(shuō)，但是它確實(shí)有效，并且可以帶來(lái)奇跡。有關(guān)如何使用簡(jiǎn)單的SVG圖像填充一些空間，同時(shí)又保持帶寬和渲染成本不高的完美圖片(heh)示例，請(qǐng)參見(jiàn)bebold。

　　2.縮放布局

　　所以我們都知道響應(yīng)式設(shè)計(jì)是如何工作的，對(duì)嗎?好吧，使用CSS Grid變得容易得多。我一直在嘗試將其用于個(gè)人項(xiàng)目，但該死的確實(shí)改變了一切。前端開(kāi)發(fā)人員數(shù)十年來(lái)一直在嘗試的雜志式布局?他們現(xiàn)在很容易。簡(jiǎn)單。去已經(jīng)讀了一個(gè)教程。

　　剩下的所有時(shí)間，為什么不讓中央包裹div超過(guò)1200像素，怎么辦呢?可能很有趣。有關(guān)絕對(duì)華麗(如果有些帶寬的話)的示例，請(qǐng)參見(jiàn)Seedlip。

　　3.響應(yīng)式

　　但是，有時(shí)候你不想花太多時(shí)間在圖片上。也許你只想要粗俗的文字。但是，多年來(lái)，我們?cè)陧憫?yīng)式布局上進(jìn)行了各種迭代。更加困難的是通過(guò)屏幕分辨率上下縮放我們的排版，這種方式看起來(lái)自然而流暢。當(dāng)然，你可以使用幾十個(gè)媒體查詢(xún)(如果你像我一樣懶，也可以使用兩個(gè))來(lái)完成此操作，但是如果我們想以一種簡(jiǎn)單的方式進(jìn)行操作，則可以使用CSS calc函數(shù)。

　　當(dāng)然，克里斯·科耶爾(Chris Coyier)自2012年以來(lái)一直在撰寫(xiě)有關(guān)此內(nèi)容的文章，但對(duì)瀏覽器的支持并不總是那么出色。我非常喜歡Mike Foskett的Fluid- Response字體大小計(jì)算器所使用的技術(shù)，該方法允許你指定最大字體大小，并且可以計(jì)算rem和em中的所有內(nèi)容(如果你要這樣做的話)。

　　有關(guān)該技術(shù)的示例，請(qǐng)參閱CSS-Tricks上的任何文章。

　　4.只需在屏幕上放更多東西

　　作為一個(gè)極簡(jiǎn)主義者，我并不是只用信息轟炸用戶(hù)的忠實(shí)粉絲。但是，有時(shí)候這正是他們想要和需要的。這種方法最明顯的用例是在儀表板風(fēng)格的用戶(hù)界面和普通的老式電子商務(wù)中。在這兩種情況下，如果你沒(méi)有為功能和/或產(chǎn)品使用最大的潛在空間，則實(shí)際上是在降低用戶(hù)的速度時(shí)降低了他們的速度。

　　大多數(shù)儀表板設(shè)計(jì)師都已經(jīng)做好了準(zhǔn)備。但是，我看到越來(lái)越多的電子商務(wù)網(wǎng)站模板試圖將產(chǎn)品塞滿(mǎn)大屏幕上的小區(qū)域，這對(duì)我來(lái)說(shuō)毫無(wú)意義。

　　例如：我不知道...亞馬遜?我不會(huì)鏈接它。無(wú)論如何，他們最終都會(huì)吸引我們的流量。實(shí)際上，前面提到的Seedlip在本節(jié)中也很好用。

　　現(xiàn)在，我反對(duì)這種方法的地方是新聞網(wǎng)站，通常他們似乎同意我的觀點(diǎn)。盡管有些仍在全屏顯示，但它們使內(nèi)容足夠大，以至于一次在視口中沒(méi)有太多內(nèi)容，這鼓勵(lì)你向下滾動(dòng)并真正選擇文章。當(dāng)然，他們這樣做是為了展示更多廣告，但這可能是廣告實(shí)際上有助于改善體驗(yàn)的少數(shù)幾次的種類(lèi)。

　　5.視頻

　　最后，一個(gè)真正的大腦。我實(shí)際上不確定有人做錯(cuò)了這個(gè)。不過(guò)，如果你仍然打算在網(wǎng)站上廣泛使用視頻，而又對(duì)帶寬不太感興趣，那就加大力度吧。這是視頻，這就是它的用途。如果沒(méi)有其他問(wèn)題，至少可以讓人們選擇以全屏模式觀看你的視頻。有關(guān)此操作提示的示例，請(qǐng)?jiān)L問(wèn)幾乎所有電影制片人的網(wǎng)站。