简单的说明一下：我们经常看见的网页都是居中类型的，做起来容易，只要设置好主内容的宽度然后居中就好。适合门户网站、平台类网站、内容比较多信息量大的站点。
另外一种是布满全屏的网页，又分为自适应和响应式。常见的全屏的后台界面就是自适应的，国外常见这种形式，一般在一些流行的设计产品上多见，科技公司网站和一些高逼格的站点。
设计的时候图标可以做成字体图标或者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 |
