最近在整理一些自己的DEMO...发现有些DEMO因为太久了,自己都忘记了。所以还是贴出来吧,既是分享也是便于自己查看。

随着手机越来越智能、平板电脑越来越主流,移动终端大赶超传统PC只是时间的问题。可随时而来的问题就是,移动终端由于为了适合各种人群和需求,往往屏幕的尺寸层出不穷。这就导致很多网站看起来不伦不类,在PC上看明明很好,但一到小屏幕的移动端,就完全变形或者呈现效果不佳。为此,一些网站往往根据不同的屏幕分辨率,制作不同样式的页面,但这样就大大增加了成本。

科技是与时俱进的,技术也是与时俱进的,所以老外就想到了“响应式Web设计(Responsive Web Design)”。其概念就是根据不同的设备,不同的屏幕进行响应,调用最符合当前用户的一个网页风格。(其实我的网站很早以前就应用了响应式web设计,不过仅仅针对小于1240的屏幕做了“一个”窄版的风格,可能没什么人会注意到此细节。)

另外相对应的优势也十分明显:页面只有一个,只是针对不同的分辨率、不同的设备环境进行了一些不同的设计,所以在开发、维护和运营上,相对多个版本,能节约成本。 兼容性优势:移动设备新的尺寸层出不穷,定制的版本通常只适用于某些规格的设备,如果新的设备分辨率变化较大,则往往不能兼容,而开发新的版本需要时间,这段时间内的访问就是个问题,但是响应式Web设计可以提前预防这个问题。 操作灵活:响应式设计是针对页面的,可以只对必要的页面进行改动,其他页面不受影响。

响应式Web设计实现起来并不难,最难的是如何始终呈保持良好的用户体验性和页面结构的通用性,这就非常考验设计人员和开发人员的思路。页面的制作方面和传统HTML几乎没有任何差别,最主要的就是下面2段代码,我相信你很容易就能理解:

HTML CODE:

<!-- 下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS CODE:

/*
	iPhone横屏时的宽是480像素。
	@media screen and (max-width: 480px) 代表最大宽度,也就是说当用户(设备)屏幕尺寸小于480像素时,调用如下样式。
	另外,默认情况下,iPhone会将过小的字号放大,所以我们通过设置属性-webkit-text-size-adjust,禁用html节点的字号自动调整。
*/
@media screen and (max-width: 480px) {
	.post-image{ width:99%;}
	#site-title{ font-size:45px;}
	#main-nav li{ float:none;}
	html { -webkit-text-size-adjust: none;}
}

好了,大家看示例吧~ 记得看的时候改变下浏览器窗口大小,支持手机访问。
Demo