在
網(wǎng)頁設(shè)計(jì)中如果我們能夠毫無爭(zhēng)議地實(shí)現(xiàn)設(shè)計(jì)師貢獻(xiàn)的大小會(huì)怎么樣?如果我們可以設(shè)置自定義錨點(diǎn)來生成一個(gè)完美的響應(yīng)值,在流體大小接近時(shí)給我們更多的選擇,會(huì)怎么樣?如果我們有一個(gè)神奇的公式來控制和同步整個(gè)項(xiàng)目會(huì)怎么樣?
現(xiàn)在網(wǎng)頁設(shè)計(jì)的排版都要考慮PC和移動(dòng)端,我們也一直在優(yōu)化這個(gè)過程,如何能高效的達(dá)成我們想要的結(jié)果。類似我們?nèi)绾巫钣行У貙?shí)現(xiàn)指定的大???我們?nèi)绾未_保舒適的平板電腦視圖?我們?nèi)绾蝺?yōu)化大屏幕的輸出?我們?cè)撊绾螒?yīng)對(duì)極端的長(zhǎng)寬比?我希望能夠讀取不同大小(字體、空格等)的兩個(gè)值。)并把它們作為參數(shù)輸入到一個(gè)函數(shù)中,這個(gè)函數(shù)為我做了所有的工作。
我厭倦了為每個(gè)值編寫媒體查詢,我想避免設(shè)計(jì)跳轉(zhuǎn)。維護(hù)和效果不盡人意。那么實(shí)現(xiàn)設(shè)計(jì)師貢獻(xiàn)的最好方式是什么呢?但是對(duì)于我的項(xiàng)目,我通常需要更多的設(shè)置選項(xiàng)。平板電腦視圖經(jīng)常變得太小,我既不能對(duì)更大的視窗做出反應(yīng),也不能對(duì)縱橫比做出反應(yīng)。在整個(gè)項(xiàng)目中有一個(gè)成比例的同步是很好的。我可以用計(jì)算出的值定義全局變量,但是我還希望能夠毫不費(fèi)力地在組件中局部生成一個(gè)插值。我想畫出我自己的回應(yīng)線。所以我需要一個(gè)工具,它能根據(jù)幾個(gè)定位點(diǎn)(屏幕定義)得出完美的值,并自動(dòng)完成我大部分項(xiàng)目的過程。我的工具必須快速易用,代碼必須易讀易維護(hù)。
正文字體大小應(yīng)為16px在移動(dòng)和22px在桌面上(我們稍后將處理完整的樣式指南)。移動(dòng)尺寸應(yīng)該從375px并不斷調(diào)整以適應(yīng)1024px。直到1440px尺寸將靜態(tài)地保持在最佳值。之后,這些值應(yīng)該線性增加到2000px,之后max-wrapper生效。為了確保良好的可訪問性,我建議在每種情況下測(cè)試所有尺寸是否都足夠可縮放。差異較大的參數(shù)可能不會(huì)按預(yù)期方式運(yùn)行。
現(xiàn)在我們已經(jīng)創(chuàng)建了一個(gè)為我們做所有工作的函數(shù)。它取一個(gè)最小值和一個(gè)最佳值,并考慮屏幕寬度、長(zhǎng)寬比和指定的錨點(diǎn),對(duì)我們的CSS屬性進(jìn)行計(jì)算——一個(gè)驅(qū)動(dòng)整個(gè)項(xiàng)目的公式。沒有媒體查詢,沒有斷點(diǎn),沒有設(shè)計(jì)跳轉(zhuǎn)。