網頁尺寸規範

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

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

設計的時候圖標能夠作成字體圖標或者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