retina做网页设计 第1篇
（1）什么是1px边框？
上图中，对于一条 1px 宽的直线，它们在屏幕上的物理尺寸(灰色区域)的确是相同的，不同的其实是屏幕上最小的物理显示单元，即物理像素，所以对于一条直线，iphone5它能显示的最小宽度其实是图中的红线圈出来的灰色区域，用css来表示，理论上说是 。（css像素在不同设备上的物理大小是一样的）
所以，设计师想要的retina下 border: 1px; ，其实就是1物理像素宽，对于css而言，可以认为是 border: ; ，这是retina下(dpr=2)下能显示的最小单位。
然而，无奈并不是所有手机浏览器都能识别 border: ; ，ios7以下，android等其他系统里，会被当成为0px处理，那么如何实现这 呢？
（2）解决方案：
利用transform:scale(x,y)，设置线条为1px，然后通过transform:scale(x,y)来缩放线条为原来的一半，可显示的线条。
retina做网页设计 第2篇
（1）viewport默认宽度
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，不做任何设置的移动设备，默认大小一般是980px。
例如iPhone4S如果不设置viewport，他就会默认是980px，就像把屏幕分成980份（不是屏幕分辨率的640px哦！）。如果设置一个元素为100px*100px，看起来就是屏幕的100/980，可能如下图所示：
（2）自定义viewport宽度
所以为了让100px的元素不这么小，必须将默认980去掉，改成更小的值，如何改呢？
每个设置对应的是：
例如iPhone4S如果设置viewport width=device-width，他就会是320px，就像把屏幕分成320份。如果设置一个元素为100px*100px，看起来就是屏幕的100/320，可能如下图所示：
那么device-width就是屏幕分辨率的宽度？
其实不是的，例如iPhone6的屏幕分辨率是1334*750px，ppi是326，所以系数是2x。那device-width就等于750/2=375px。
参考链接：
retina做网页设计 第3篇
固定栅格示意
如果开发那边写了一个固定栅格，当你从桌面缩小到平板电脑，就像是在900px的浏览器宽度时，你不会看到任何变化，设计就像是被剪掉了一样。但当达到768px临界点时，设计马上就会改变，平板电脑上的显示效果就会好起来。如果继续减小这个值，同样的事情也会发生，在到达另一个临界值之前，设计看起来都是不变的。
流动网格的示例
现在来看看流动网格的特点，当窗口缩小时，内容将动态的发生变化，文本会进行换行，元素也会变窄。然而，这些元素在内容宽度缩小到下一个临界值之前，布局是不会变化的。
所以我想说的是，设计的临界值只是一个更改布局的参考点。这就是为什么列宽和槽在网格中不会改变的原因，因为我们想让设计师在考虑布局时能够更容易地创建一致性。
3. 混合网格
在实际项目中，使用流动网格和固定网格的组合也是常见的做法。网站通常是流动网格，因为它要去适应各种不同终端的大小。
一些做的很酷的栅格系统
不需要太死板地去坚持传统栅格套路，12、8、4这样的分布，甚至不需要20px的水槽，下面是一些在设计中使用栅格系统做的很棒的设计灵感。
Dropbox Design
使用网格的方式取决于你自己。你可以在主要内容部分使用网格，次要内容则不使用。在Wordpress的例子中，页面中间的部分使用栅格化设计，左侧的侧边栏则没有使用。
The Mockup Club
我非常确定的说，Instagram的PC端是用上了6列栅格布局。
最后，写这篇文章的目的是想提供一些关于如何在响应式设计中使用栅格系统，半人马花了很多年的时间写了大量的网页前端代码来理解栅格系统是如何工作的。学习了很多技术类书籍和教程，我知道很多人都在关注它为什么重要，却不知道其所以然和如何去使用它。
你要做的最好的事情就是从现在开始注意那些优秀设计是如何对齐元素的，如果是网页设计师或者UI设计师，半人马的建议是你最好学习一下基本的前端代码比如html和css,你将会开始看到这些网格是如何工作的。这对于你的专业是具有很大的帮助的。不再盲目限定于设计软件如photoshop给你的画布大小，而茫然，然后在群里问我该设计多大的块？哈哈
希望这篇文章对大家有帮助。
文章中的图片来源于网络，如有侵权请联系我删除！返回搜狐，查看更多