网页尺寸规范

时间：2018-09-10 11:06:17 收藏：0 阅读：6255

简单的说明一下：我们经常看见的网页都是居中类型的，做起来容易，只要设置好主内容的宽度然后居中就好。适合门户网站、平台类网站、内容比较多信息量大的站点。

另外一种是布满全屏的网页，又分为自适应和响应式。常见的全屏的后台界面就是自适应的，国外常见这种形式，一般在一些流行的设计产品上多见，科技公司网站和一些高逼格的站点。

设计的时候图标可以做成字体图标或者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