制作網頁最大尺寸和最小尺寸-tft每日頭條

制作網頁最大尺寸和最小尺寸（最全網頁尺寸規範）1

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

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

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

制作網頁最大尺寸和最小尺寸（最全網頁尺寸規範）2

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

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

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

制作網頁最大尺寸和最小尺寸（最全網頁尺寸規範）3

制作網頁最大尺寸和最小尺寸（最全網頁尺寸規範）4

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

制作網頁最大尺寸和最小尺寸（最全網頁尺寸規範）5

制作網頁最大尺寸和最小尺寸（最全網頁尺寸規範）6

制作網頁最大尺寸和最小尺寸（最全網頁尺寸規範）7