網頁尺寸規範

阿新 • • 發佈：2018-09-10

uip lan 公司信息科技 targe 流式 ide 流行

簡單的說明一下：我們經常看見的網頁都是居中類型的，做起來容易，只要設置好主內容的寬度然後居中就好。適合門戶網站、平臺類網站、內容比較多信息量大的站點。

另外一種是布滿全屏的網頁，又分為自適應和響應式。常見的全屏的後臺界面就是自適應的，國外常見這種形式，一般在一些流行的設計產品上多見，科技公司網站和一些高逼格的站點。

設計的時候圖標可以做成字體圖標或者svg矢量格式的，具體要和前端配合完成，一般遵循文字流式，控件彈性，圖片等比縮放這3大適配技巧。

網頁設計具體教程點我>>

技術分享圖片

大家都知道在網頁中柵格化是很常見，也是很保險的一種做法，良好的運用柵格化是網頁設計中的一大利器，但是對於像小編這種對數字不是很敏感的設計師，算間距，算內容大小，簡直要命，每次都要算好多次，這款小工具就完美的解決了算數這一大問題。從此對柵格化間距說so easy！

傳送門地址：http://grid.guide/

頁面簡潔清晰，可以看到的直觀操作就五個，只要確定好內容總體寬帶，分欄數喝顏色，下面就給你分了很多不同的間距的柵格，當然每個柵格都可以下載，拖進ps，拉好參考線即可！

技術分享圖片

laptop 設備名稱	操作系統	尺寸 in	PPI	縱橫比	寬 x 高 dp	寬 x 高 px	密度 dpi
MacBook	OS X	12.0	226	16 : 10	1280 x 800	2304 x 1440	2.0 xhdpi
MacBook Air 11	OS X	11.6	135	16 : 9	1366 x 768	1366 x 768	1.0 mdpi
MacBook Air 13	OS X	13.3	128	16 : 10	1440 x 900	1440 x 900	1.0 mdpi
MacBook Pro 13	OS X	13.3	227	16 : 10	1280 x 800	2560 x 1600	2.0 xhdpi
MacBook Pro 15	OS X	15.4	220	16 : 10	1440 x 900	2880 x 1800	2.0 xhdpi
iMac 21.5	OS X	21.5	102	16 : 9	1920 x 1080	1920 x 1080	1.0 mdpi
iMac 21.5 4K	OS X	21.5	218	16 : 9	1920 x 1080	4096 x 2304	2.0 xhdpi
iMac 27	OS X	27	109	16 : 9	2560 x 1440	2560 x 1440	1.0 mdpi
iMac 27 5K	OS X	27	218	16 : 9	2560 x 1440	5120 x 2880	2.0 xhdpi
Surface Book	Windows	13.5	267	3 : 2	1500 x 1000	3000 x 2000	2.0 xhdpi
Surface Pro	Windows	12.3	267	3 : 2	1368 x 912	2736 x 1824	2.0 xhdpi
Surface Laptop	Windows	13.5	201	3 : 2	1128 x 752	2256 x 1504	2.0 xhdpi
Surface Studio	Windows	28	192	3 : 2	2250 x 1500	4500 x 3000	2.0 xhdpi
Dell XPS 13	Windows	13.3	276	16 : 9	1920 x 1080	3200 x 1800	1.5 hdpi
Dell XPS 15	Windows	15.6	280	16 : 9	1920 x 1080	3840 x 2160	2.0 xhdpi
小米筆記本Air 12.5	Windows	12.5	176	16 : 9	1920 x 1080	1920 x 1080	1.0 mdpi
小米筆記本Air 13.3	Windows	13.3	166	16 : 9	1920 x 1080	1920 x 1080	1.0 mdpi
小米筆記本Pro 15.6	Windows	15.6	166	16 : 9	1920 x 1080	1920 x 1080	1.0 mdpi

網頁尺寸規範

uip lan 公司信息科技 targe 流式 ide 流行簡單的說明一下：我們經常看見的網頁都是居中類型的，做起來容易，只要設置好主內容的寬度然後居中就好。適合門戶網站、平臺類網站、內容比較多信息量大的站點。另外一種是布滿全屏的網頁，又分為自適應和響應式。常見的