亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

最近工作中有個(gè)空檔期，正好團(tuán)隊(duì)里的分享也輪到我了，加上前一陣子整個(gè)team在整理項(xiàng)目的設(shè)計(jì)規(guī)范，涉及到了布局和柵格的部分，所以就研究了一下，看了大量的資料，加上自己的一些理解，寫(xiě)了點(diǎn)總結(jié)，可能有很多不足之處，希望大家可以多多提意見(jiàn)。

先說(shuō)下網(wǎng)頁(yè)設(shè)計(jì)中的布局吧，我個(gè)人認(rèn)為，網(wǎng)頁(yè)設(shè)計(jì)中的布局可以從兩個(gè)角度來(lái)看：設(shè)計(jì)視角和前端視角。本篇文章主要側(cè)重分析前端視角，由于設(shè)計(jì)視角比較好理解，所以不做太多的贅述。

先說(shuō)下設(shè)計(jì)視角吧，這個(gè)最貼近設(shè)計(jì)師，比較好理解。

設(shè)計(jì)視角主要是從網(wǎng)頁(yè)的排版角度去進(jìn)行分類(lèi)，大致分為四種：上下布局、左右布局、國(guó)字形布局和T字形布局。

上下布局是最常見(jiàn)的布局方式，基本上都會(huì)在最上方有一個(gè)導(dǎo)航，下方是內(nèi)容區(qū)，有的官網(wǎng)還會(huì)有頁(yè)腳footer，站酷就是上下布局。左右布局在后臺(tái)類(lèi)、TO B類(lèi)產(chǎn)品中比較常見(jiàn)，一般左側(cè)為側(cè)邊欄，右側(cè)為內(nèi)容區(qū)。國(guó)字形布局和T字形布局其實(shí)算作上下布局，只不過(guò)比較典型，可以單拎出來(lái)作為一種布局類(lèi)型。

接下來(lái)我們來(lái)看下前端視角的布局方法

首先為什么要了解些前端的布局方式呢，直接甩給前端一個(gè)設(shè)計(jì)稿，讓他去實(shí)現(xiàn)不就行了？其實(shí)這涉及到的是設(shè)計(jì)和開(kāi)發(fā)之間的協(xié)作關(guān)系，一個(gè)有規(guī)律有規(guī)范的設(shè)計(jì)稿，前端實(shí)現(xiàn)起來(lái)更加容易，也方便他管理自己的代碼，實(shí)現(xiàn)出來(lái)的樣式也會(huì)更靈活，在出設(shè)計(jì)稿之前和前端溝通一下，采用什么布局方式，需要設(shè)計(jì)怎么配合，也費(fèi)不了多少工夫。當(dāng)然直接甩個(gè)設(shè)計(jì)稿，前端也能實(shí)現(xiàn)，但一些特殊效果真的是需要雙方合作才能完成的。

廢話不多說(shuō)

前端視角主要是指實(shí)現(xiàn)頁(yè)面的各種CSS布局方式，我這里主要?dú)w納了5種：靜態(tài)布局、流式布局、響應(yīng)式布局、彈性布局和Flex布局。除了靜態(tài)布局，其他都能實(shí)現(xiàn)在不同分辨率下頁(yè)面的自適應(yīng)，來(lái)給用戶最佳的視覺(jué)呈現(xiàn)。

靜態(tài)布局（static layout）

靜態(tài)布局也叫做固定布局，網(wǎng)頁(yè)內(nèi)容區(qū)采?絕對(duì)寬度，網(wǎng)頁(yè)內(nèi)每個(gè)模塊的尺寸大小固定，一般整體在瀏覽器內(nèi)居中顯示，并會(huì)設(shè)置最小寬度min-width，當(dāng)分辨率小于最小寬度就會(huì)出現(xiàn)滾動(dòng)條，如果大于最小寬度則內(nèi)容居中外加背景 。

找了一個(gè)很古老的網(wǎng)站，大家看看就好。。。

應(yīng)用場(chǎng)景：目前大部分的高校官網(wǎng)、醫(yī)院官網(wǎng)、政府網(wǎng)站等都是靜態(tài)布局，而且設(shè)計(jì)風(fēng)格上也很老舊，你們懂得，當(dāng)然并不是說(shuō)靜態(tài)布局的風(fēng)格就是老舊，這個(gè)布局和設(shè)計(jì)風(fēng)格沒(méi)有多大關(guān)系哈，有很多新聞門(mén)戶類(lèi)、企業(yè)官網(wǎng)等網(wǎng)站采用靜態(tài)布局，同樣也很出彩。

優(yōu)點(diǎn)：這種布局方式對(duì)設(shè)計(jì)師和前端來(lái)說(shuō)都是最簡(jiǎn)單的，不用去考慮兼容性等問(wèn)題。設(shè)計(jì)和開(kāi)發(fā)成本低，后期維護(hù)成本低。

缺點(diǎn)：在小屏上有可能出現(xiàn)橫向滾動(dòng)條，在大屏上會(huì)出現(xiàn)大量的空白，不能根據(jù)用戶的屏幕尺寸做出不同的表現(xiàn)，用戶體驗(yàn)比較差。 

流式布局（fluid layout ）

流式布局英文fluid layout，也可以翻譯成liquid layout，是指頁(yè)面按照百分比%定義寬度（也就是長(zhǎng)度單位不是我們平常使用的px，而是百分?jǐn)?shù)），來(lái)適配不同的屏幕分辨率，在不同的分辨率下網(wǎng)頁(yè)布局保持不變，一般搭配min-、max-屬性來(lái)控制尺寸流動(dòng)范圍，以免過(guò)大或者過(guò)小影響展示和閱讀，頁(yè)面內(nèi)元素的高度和文字大小往往px來(lái)固定住，方便頁(yè)面排版和閱讀。

流式布局的特點(diǎn)是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)。

圖片來(lái)自ant design

應(yīng)用場(chǎng)景：流式布局典型的代表是柵格系統(tǒng)，一般頁(yè)面中采用百分比定寬的部分都可以看做是流動(dòng)布局的屬性。目前大部分網(wǎng)頁(yè)為了實(shí)現(xiàn)更好的視覺(jué)效果都會(huì)全局或局部使用流式布局。

優(yōu)點(diǎn)：在不同分辨率屏幕上能夠很好的展示頁(yè)面元素，如果設(shè)計(jì)得當(dāng)，流動(dòng)布局能避免在小屏幕上出現(xiàn)水平滾動(dòng)條，對(duì)于差別不是很大的屏幕分辨率十分友好。

缺點(diǎn)：當(dāng)屏幕分辨率差異過(guò)大時(shí)，因?yàn)閷挾仁褂?百分比定義，但是高度和文字大小等大都是用px來(lái)固定，有些頁(yè)面元素寬度被拉的很高，頁(yè)面縮小后，一些字或者圖片或者圖表等會(huì)產(chǎn)生堆疊，顯示效果不太好控制。

響應(yīng)式布局（responsive layout ）

響應(yīng)式布局是指網(wǎng)頁(yè)分別為不同的屏幕分辨率定義不同的布局，同時(shí)在每個(gè)布局中，各元素大小采用百分比定義寬度，即頁(yè)面元素寬度隨著窗口調(diào)整而自動(dòng)適配?？梢钥醋鍪嵌x了幾個(gè)不同尺寸的流式布局。

布局特點(diǎn)：基于柵格系統(tǒng)設(shè)計(jì)和開(kāi)發(fā)，通過(guò)監(jiān)測(cè)設(shè)備的分辨率來(lái)呈現(xiàn)不同的布局。Bootstrap（一個(gè)前端代碼庫(kù)）的響應(yīng)式設(shè)計(jì)中，預(yù)設(shè)了六個(gè)響應(yīng)尺寸：xs、sm、 md 、lg、 xl、  xxl， 當(dāng)屏幕分辨率較高時(shí)采用XL或者XXL的布局，當(dāng)屏幕過(guò)小時(shí)，采用XS的布局。

網(wǎng)站示例：Uplabs網(wǎng)站就是基于柵格系統(tǒng)進(jìn)行了響應(yīng)式布局，寬屏模式下展示更多內(nèi)容，包括上方的引導(dǎo)區(qū)和各種標(biāo)簽入口，當(dāng)在小屏上市就折疊部分內(nèi)容，同時(shí)作品縮略圖也實(shí)現(xiàn)了基于柵格進(jìn)行放大和縮小。

優(yōu)點(diǎn)：能夠適應(yīng)pc、pad和移動(dòng)端，在任何尺寸的屏幕上都能呈現(xiàn)完美的視覺(jué)效果

缺點(diǎn)：要匹配足夠多的屏幕大小，需要設(shè)計(jì)多個(gè)版本，設(shè)計(jì)和開(kāi)發(fā)工作量大

因?yàn)樽罱谧鲈O(shè)計(jì)規(guī)范，無(wú)意中發(fā)現(xiàn)shopify的設(shè)計(jì)規(guī)范的示例中設(shè)計(jì)了四種尺寸的設(shè)計(jì)稿：1440px、1024px、776px、320px，所以還是繁瑣的。（這么多版本，設(shè)計(jì)和開(kāi)發(fā)會(huì)吐血吧）

下面是響應(yīng)式布局的一些網(wǎng)站：Bootstrap（https://getbootstrap.com/）、Uplabs（https://www.uplabs.com/）、Ant Design（https://ant.design/components/grid-cn/）

彈性布局（em/rem layout）

彈性布局翻譯過(guò)來(lái)不是em/rem layout ，因?yàn)閺椥圆季植捎玫膯挝皇莈m或者rem，為了直觀，所以直接采用了單位縮寫(xiě)去區(qū)分。

em和rem是一個(gè)相對(duì)長(zhǎng)度單位，頁(yè)面內(nèi)各元素的尺寸采用em/rem做單位，em是相對(duì)其父元素大小，rem是始終相對(duì)于html大小，即頁(yè)面根元素。(有點(diǎn)看不懂是吧，沒(méi)關(guān)系，你只需要他是個(gè)相對(duì)長(zhǎng)度單位就行了）

布局特點(diǎn)：采用em或者rem為單位，頁(yè)面元素能夠根據(jù)屏幕分辨率進(jìn)行等比縮放，支持文字、間距類(lèi)等比縮放，國(guó)內(nèi)PC端網(wǎng)頁(yè)不咋用，在國(guó)外已經(jīng)很普遍，比較適用于移動(dòng)端H5的適配

MINX網(wǎng)站采用了em為單位，進(jìn)行了彈性布局，當(dāng)屏幕分辨率差別不是很大時(shí)，視覺(jué)效果還是不錯(cuò)的。

優(yōu)點(diǎn)：彈性適配不同的分辨率，視覺(jué)效果比較好，而且不用出多套設(shè)計(jì)稿，是不是很爽！

缺點(diǎn)：em以父節(jié)點(diǎn)font-size大小為參考點(diǎn)，進(jìn)行任何元素設(shè)置，都需要知道他父元素的大小，容易造成頁(yè)面排版混亂，rem支持的瀏覽器比較少。

還是上面的網(wǎng)站，當(dāng)頁(yè)面繼續(xù)縮小，會(huì)出現(xiàn)元素的疊加，所以em單位使用時(shí)不太好把控效果。

看了好多國(guó)外的網(wǎng)站，發(fā)現(xiàn)彈性布局還是很普遍的，彈性布局示例網(wǎng)站：https://minx-net.co.jp/

https://northstreetcreative.com/

https://clearleft.com/

Flex布局

個(gè)人理解的，felx布局主要是用來(lái)定義頁(yè)面內(nèi)某些元素相對(duì)于父級(jí)元素的對(duì)齊、排序、分布等排版方式，通過(guò)調(diào)整父級(jí)內(nèi)元素的寬高，從而在任何顯示設(shè)備上實(shí)現(xiàn)對(duì)可用顯示空間最佳填充的能力。

圖片來(lái)自ant design

我個(gè)人覺(jué)得flex布局比較適合模塊內(nèi)元素的布局，算不上整個(gè)頁(yè)面級(jí)別的布局。

優(yōu)點(diǎn)：能夠很好的契合移動(dòng)端，無(wú)需考慮分辨率問(wèn)題，移動(dòng)端flex布局占據(jù)主流

缺點(diǎn)：PC端網(wǎng)頁(yè)兼容性不好，ie瀏覽器必須是10.0版本以上；對(duì)設(shè)計(jì)稿要求很高，需要是有規(guī)律的設(shè)計(jì)稿，比如柵格系統(tǒng)；網(wǎng)頁(yè)內(nèi)容較多時(shí)，flex布局不太好控制。

我個(gè)人找到的知乎是用了Flex布局，但是他進(jìn)行了頁(yè)面定寬，所以很多效果看不出來(lái)

個(gè)人總結(jié)了下各種布局的關(guān)系

流動(dòng)布局可以看做是靜態(tài)布局的動(dòng)態(tài)版，響應(yīng)式布局可以看做是幾個(gè)不同尺寸的流動(dòng)布局，在每個(gè)流動(dòng)布局之間進(jìn)行自適應(yīng)。流動(dòng)布局、響應(yīng)式布局、彈性布局和flex布局都能實(shí)現(xiàn)自適應(yīng)的效果，只不過(guò)彈性布局是用em/rem為單位，流動(dòng)布局和響應(yīng)式布局是以百分比為單位，flex由于兼容性問(wèn)題，PC端不太常用。

各種布局不是絕對(duì)的，可以綜合使用，目的都是使頁(yè)面在不同分辨率的設(shè)備上實(shí)現(xiàn)更好的用戶體驗(yàn)，針對(duì)不同性質(zhì)的網(wǎng)站采用合適的布局方式。

我這里將柵格設(shè)計(jì)放了進(jìn)來(lái)，但實(shí)際上，頁(yè)面布局可以基于柵格也可以不基于柵格，完全看設(shè)計(jì)師個(gè)人和實(shí)際工作場(chǎng)景了。

----------------------------------------------------------------------------

看完布局，你會(huì)發(fā)現(xiàn)，很多國(guó)內(nèi)常用的布局都和柵格有關(guān)，有些網(wǎng)頁(yè)設(shè)計(jì)師在做的時(shí)候也喜歡用柵格來(lái)規(guī)范自己的設(shè)計(jì)稿，所以我簡(jiǎn)單的梳理了一下柵格的小知識(shí)，希望對(duì)大家有用。

首先，柵格化設(shè)計(jì)（grid-design ）不等于柵格化開(kāi)發(fā)（css grid ）。我之前一直以為用柵格就要實(shí)現(xiàn)網(wǎng)頁(yè)的響應(yīng)式，由于我們是to b類(lèi)的網(wǎng)站，所以剛開(kāi)始很抵觸，總覺(jué)得沒(méi)法定寬設(shè)計(jì)某個(gè)模塊，后來(lái)查了些資料才發(fā)現(xiàn)，這是兩回事。

柵格化設(shè)計(jì)是針對(duì)設(shè)計(jì)師而言，主要是為了提高網(wǎng)頁(yè)的規(guī)范性和統(tǒng)一性，可以不考慮頁(yè)面的響應(yīng)式；而柵格化開(kāi)發(fā)，是針對(duì)開(kāi)發(fā)人員，特指前端攻城獅使用的css框架，用來(lái)實(shí)現(xiàn)頁(yè)面的響應(yīng)式布局。也就是你可以按照柵格去出設(shè)計(jì)稿，但不一定基于柵格開(kāi)發(fā)，基于柵格開(kāi)發(fā)意味著需要實(shí)現(xiàn)網(wǎng)頁(yè)響應(yīng)式布局。

那么柵格是什么，想必大家都很清楚，就是將網(wǎng)頁(yè)劃分為幾個(gè)等分欄。大概就長(zhǎng)下面這樣

柵格包括列寬（column）、間隔（gutter）和外邊框margin，gutter是左右均分，分別位于列寬的兩側(cè)，margin是位于整個(gè)網(wǎng)頁(yè)的兩側(cè)的空白區(qū)，由1/2的gutter和一個(gè)padding組成，一般來(lái)說(shuō)網(wǎng)頁(yè)的總寬度是不包含左右兩側(cè)的margin的。

柵格系統(tǒng)的適配

一般來(lái)說(shuō)，適配時(shí)，間距gutter寬度不變，只會(huì)改變列寬column，但是在material design中定義了多種寬度的gutter，當(dāng)寬屏?xí)r使用16或者24px的gutter，窄屏使用8px的gutter，所以可以根據(jù)實(shí)際情況自己定義是否改變gutter寬度。

柵格的類(lèi)型

我個(gè)人將柵格歸為了4類(lèi)：有間隔柵格、無(wú)間隔柵格、局部柵格、水平柵格。有間隔柵格最為常見(jiàn)，無(wú)間隔柵格也就是gutter為0，局部柵格一般適用于頁(yè)面內(nèi)有側(cè)邊欄固定的布局，側(cè)邊欄可以不算入柵格范圍，水平柵格是指垂直和水平都進(jìn)行柵格，感覺(jué)不太常用。

柵格常見(jiàn)分欄

12欄和24欄是最常見(jiàn)的，因?yàn)槟軌虮?、3、4、6整除，也就是頁(yè)面能夠均分為2、3、4、6等份，其次是16列比較常見(jiàn)。列數(shù)越多，排版布局越靈活，列數(shù)越少限制性越大，同時(shí)頁(yè)面的統(tǒng)一性更強(qiáng) ?？梢愿鶕?jù)網(wǎng)頁(yè)特點(diǎn)選擇合適的欄數(shù)，不必拘泥。

下圖是經(jīng)典的960柵格系統(tǒng)

網(wǎng)上也有很多詳細(xì)介紹柵格的文章，感興趣的朋友可以加以研究，尤其是material design的8點(diǎn)柵格系統(tǒng)，值得好好學(xué)習(xí)和借鑒。

差不多就這樣，希望這篇文章能夠幫到你，當(dāng)然如果文章中有問(wèn)題的地方，歡迎各位留言。