UI設(shè)計(jì)|響應(yīng)式網(wǎng)頁設(shè)計(jì)與柵格化

時(shí)間：2023-09-27 00:30:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-27 00:30:02 來源：網(wǎng)站運(yùn)營

UI設(shè)計(jì)|響應(yīng)式網(wǎng)頁設(shè)計(jì)與柵格化：

一.響應(yīng)式網(wǎng)站設(shè)計(jì)概念

響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)的理念是：頁面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以

及設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。

具體的實(shí)踐方式由多方面組成，包括弾性網(wǎng)格和布局、圖片、CSS media quety的使用等。無

論用戶正在使用筆記本還是iPad,我們的頁面都應(yīng)該能夠自動切換分辨率、圖片尺寸及相關(guān)腳

本功能等，對頁面元素進(jìn)行重新排版，甚至隱折疊，字體尺寸變化，版式調(diào)整等以適應(yīng)不同設(shè)

備的最佳瀏覽效果；

二.響應(yīng)式網(wǎng)站的寬度尺寸

隨著硬件設(shè)備的多元化，我們需要設(shè)計(jì)適應(yīng)各個(gè)屏幕尺寸的頁面。響應(yīng)式網(wǎng)站的寬度沒有固定

的尺寸，按照不同的項(xiàng)目開發(fā)要求去定，一般是3?5的寬度，用來適配臺式機(jī)、筆記本、平板

電腦的橫屏豎屏，手機(jī)的橫屏豎屏。建議尺寸為：寬度包括 480、600、840、960、1280、

1440、1600、1920 像素。













推薦一個(gè)響應(yīng)式網(wǎng)頁欣賞站，里面大概有幾百個(gè)優(yōu)秀的響應(yīng)式網(wǎng)頁案例：

三.響應(yīng)式線框圖繪制

一般來說，雖然比較優(yōu)秀的響應(yīng)式會畫手機(jī)豎向，手機(jī)橫向,PAD豎向,PAD橫向，PC電腦5種

寬度的線框。但是，基礎(chǔ)一般是先畫完手機(jī)和電腦2個(gè)版本，其他的在此基礎(chǔ)上進(jìn)行修改即

可。

1.響應(yīng)式手繪線框







2.響應(yīng)式機(jī)繪線框

四.網(wǎng)頁的柵格化設(shè)計(jì)

1.為什么我們需要網(wǎng)格布局？

在我們的Web內(nèi)容中，可以將其分割成很多個(gè)內(nèi)容塊，而這些內(nèi)容塊都占據(jù)自己的區(qū)域

（regions）,可以將這些區(qū)域想像成是一個(gè)虛擬的網(wǎng)格。

到目前為止，在一個(gè)棋板中使用不同的結(jié)構(gòu)標(biāo)簽，使用多個(gè)浮動和手動計(jì)算實(shí)現(xiàn)一個(gè)布局。這

對于Web前端人員來說，這是一件痛苦之事。

而網(wǎng)格布局將讓你擺脫這樣的困局，讓你的布局方法變得非常簡單與清晰。

柵格化設(shè)計(jì)特別適用于，由大量系統(tǒng)自動生成的頁面，如門戶站的新聞和視頻站等。







2.什么是 CSS Grid Layout?

CSS Grid Layout是CSS為布局新増的一個(gè)模塊。網(wǎng)格布局特性主要是針對于Web應(yīng)用程序的

開發(fā)者。可以用這個(gè)模塊實(shí)現(xiàn)許多不同的布局。網(wǎng)絡(luò)布局可以將應(yīng)用程序分割成不同的空間，

或者定義他們的大小、位置以及層級。

就像表格一樣，網(wǎng)格布局可以讓W(xué)eb設(shè)計(jì)師根據(jù)元素按列或行對齊排列，但他和表格不同，網(wǎng)

格布局沒有內(nèi)容結(jié)構(gòu)，從而使各種布局不可能與表格一樣。

例如，一個(gè)網(wǎng)格布局中的子元素都可以定位自己的位置，這樣他們可以重疊和類似元素定位。

所謂網(wǎng)格設(shè)計(jì)，就是把頁面，按照等比，分成等分格子，然后所有元素按照最小單位的倍數(shù)尺

寸來設(shè)計(jì)，以便于后期前端排版有規(guī)律，算定位好算，網(wǎng)頁看起來規(guī)整，適合響應(yīng)式多分辨率

適配，適合大型動態(tài)網(wǎng)站布局，CSS更好寫！

五.現(xiàn)在流行的一頁式布局

所為一頁式布局，就是TABLE單元格布局，而最近流行的布局是一頁式滾動布局。也有TAB標(biāo)

簽和一頁式結(jié)合的頁面布局。