响应式网页设计的思考

随着现在浏览器越来越多，分辨率越来越大，一些朋友跟我反馈说主题在他家大分辨率的电脑上面看着好小，能不能如果能支持大分辨率主题就好了。

目前很多设计已经开始完全的自适应设计了，就是随着分辨率的不断变化，设计就呈现不一样的展示效果,这种被成为“自适应网页设计”，也叫“响应式网页设计”。我个人不是很喜欢这种完全自适应的设计，我更加倾向于某一段分辨率用一个样式，在这个分辨率比例之间的，都是一样的展示。

然后我就仔细看了下博客访问的浏览器及分辨率，然后发现确实需要设计一套使用大分辨率的主题。

浏览器中谷歌浏览器+火狐浏览器就达到了60%，谷歌浏览器基本就占到了半壁江山。记得2012年末总结的时候谷歌浏览器是41.4%，现在都48%了。估算下来新式浏览器+IE9+IE10+有Chrome核的国内浏览器比例应该超过75%了。

分辨率，如果我们说1024是标准的分割线的话，那么大分辨率的比例接近90%，超过1028的占到85%以上。

这也使得原本990px的设计不再那么科学了，研究了一些网站，目前大分辨率下用的基本算是1190px。

于是花了十分钟的时间，调整了下宽度，应该使用新式浏览器的同学看到的应该是1190px宽度的主题了。其实使用了基础的CSS3 Media Queries，算是提前先感受下，不过这类简单线条型的主题改起来也还可以，不会难看，虽然粗犷了点。

本来想兼容下IE8及其更低版本的，不过加载了那个css3-mediaqueries.js之后发现效率貌似受到了点影响，同时导航也有点问题，索性就去掉了，必将我博客访问用户还是新式浏览器的用户居多的。

之前准备写一个手机主题的，写了一小半了，目前还在用着，可以用手机打开我博客试试，其实我准备写一个类似app效果的一个手机主题，左右展开，瀑布流加载，不过写了一半之后发现，在我iphone上面还可以，在一些安卓手机上打开之后，很卡，这让我很伤心，就这样荒废在那边了，最近在学习这个CSS3 media，准备还是用这种方式来定义一个主题，支持手机竖版，横版，ipad版等等，同时准备折腾下Retina（视网膜）屏幕的Web表现。

貌似还是有点小压力啊。come on！