來源：學ui設計網 作者：學UI設計

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

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

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

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

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

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

laptop 設備名稱

操作系統尺寸 inPPI縱橫比寬 x 高 dp寬 x 高 px密度 dpiMacBookOS X12.022616 : 101280 x 8002304 x 14402.0 xhdpiMacBook Air 11OS X11.613516 : 91366 x 7681366 x 7681.0 mdpiMacBook Air 13OS X13.312816 : 101440 x 9001440 x 9001.0 mdpiMacBook Pro 13OS X13.322716 : 101280 x 8002560 x 16002.0 xhdpiMacBook Pro 15OS X15.422016 : 101440 x 9002880 x 18002.0 xhdpiiMac 21.5OS X21.510216 : 91920 x 10801920 x 10801.0 mdpiiMac 21.5 4KOS X21.521816 : 91920 x 10804096 x 23042.0 xhdpiiMac 27OS X2710916 : 92560 x 14402560 x 14401.0 mdpiiMac 27 5KOS X2721816 : 92560 x 14405120 x 28802.0 xhdpiSurface BookWindows13.52673 : 21500 x 10003000 x 20002.0 xhdpiSurface ProWindows12.32673 : 21368 x 9122736 x 18242.0 xhdpiSurface LaptopWindows13.52013 : 21128 x 7522256 x 15042.0 xhdpiSurface StudioWindows281923 : 22250 x 15004500 x 30002.0 xhdpiDell XPS 13Windows13.327616 : 91920 x 10803200 x 18001.5 hdpiDell XPS 15Windows15.628016 : 91920 x 10803840 x 21602.0 xhdpi小米筆記本Air 12.5Windows12.517616 : 91920 x 10801920 x 10801.0 mdpi小米筆記本Air 13.3Windows13.316616 : 91920 x 10801920 x 10801.0 mdpi小米筆記本Pro 15.6Windows15.616616 : 91920 x 10801920 x 10801.0 mdpi

本教程不做商業用途，僅做學習交流使用 ， 如果有涉及到版權問題，請及時聯系删除！！！（小編分享隻為自己和大家學習所用！越努力，越幸運！）

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!