常見的網(wǎng)頁(yè)布局方法

     對(duì)于企業(yè)來(lái)說(shuō)，肯定是做一個(gè)網(wǎng)站可以在多個(gè)端口都能習(xí)慣閱讀!這樣成本更低方便管理!

　　未來(lái)展現(xiàn)流行的趨勢(shì)必定是經(jīng)過(guò)非固定尺度的規(guī)劃讓網(wǎng)站可隨著多種智能設(shè)備尺度靈活改變的展現(xiàn)方法!

　　常見的網(wǎng)頁(yè)布局方法分為以下四種：

　　1、固定寬度布局：為網(wǎng)頁(yè)設(shè)置一個(gè)固定的寬度，通常以px做為長(zhǎng)度單位，常見于PC端網(wǎng)頁(yè)。

　　這種布局方法對(duì)規(guī)劃師和CSS編寫者來(lái)說(shuō)都是更簡(jiǎn)略的，亦沒有兼容性問(wèn)題，缺陷顯而易見，即不能依據(jù)用戶的屏幕尺度做出不同的體現(xiàn)。

　　2、流式布局：為網(wǎng)頁(yè)設(shè)置一個(gè)相對(duì)的寬度，通常以百分比做為長(zhǎng)度單位。

　　這種布局方法用來(lái)應(yīng)對(duì)不同尺度的PC屏幕，但缺陷顯著：寬度運(yùn)用百分比定義，可是高度和文字大小等大都是用px來(lái)固定，所以在大屏幕的手機(jī)下顯現(xiàn)作用會(huì)變成有些頁(yè)面元素寬度被拉的很長(zhǎng)，可是高度、文字大小還是和本來(lái)一樣(即，這些東西無(wú)法變得“流式”)，顯現(xiàn)十分不協(xié)調(diào)。

　　3、自習(xí)慣布局：分別為不同的屏幕分辨率定義布局，同一個(gè)網(wǎng)頁(yè)在不調(diào)整頁(yè)面布局的前提下習(xí)慣各種不同的終端設(shè)備，這兒著重的是網(wǎng)站頁(yè)面布局不發(fā)生變化，也便是可以依據(jù)屏幕尺度調(diào)整整個(gè)網(wǎng)頁(yè)的大小。

　　很顯著能夠發(fā)現(xiàn)，產(chǎn)品的排列方法并沒有由于終端屏幕的大小而發(fā)生變化，也便是說(shuō)同一個(gè)網(wǎng)頁(yè)的基礎(chǔ)上進(jìn)行了調(diào)節(jié)的進(jìn)程。

　　是不是圖中顯現(xiàn)為蘋果官網(wǎng)，更早之前為自習(xí)慣，現(xiàn)在現(xiàn)已晉級(jí)為呼應(yīng)式網(wǎng)站!

　　4、呼應(yīng)式布局：經(jīng)過(guò)檢測(cè)設(shè)備信息，決議網(wǎng)頁(yè)布局方法，即用戶假如采用不同的設(shè)備拜訪同一個(gè)網(wǎng)頁(yè)，有可能會(huì)看到不一樣的內(nèi)容，一般情況下是檢測(cè)設(shè)備屏幕的寬度來(lái)實(shí)現(xiàn)。

　　可以看到PC端為三列，平板端的產(chǎn)品分為兩列展現(xiàn)，但手機(jī)端的則是一列，在保證描繪清晰的前提下進(jìn)行纖細(xì)的頁(yè)面布局調(diào)整，這便是呼應(yīng)式與自習(xí)慣更大的差異。

　　注：以上幾種布局方法并不是獨(dú)立存在的，實(shí)踐開發(fā)進(jìn)程中往往是彼此結(jié)合運(yùn)用的。