如何创建mobile-first（移动设备优先）的响应式的网站

今天读了这篇文章http://bradfrostweb.com/demo/mobile-first/article.html ，把学到的记录一下，方便以后使用～

1.适配的问题

目前的设备尺寸大小不一，各种尺寸都有，我们不可能编写那么多套页面去适配，但是又不可能回避这个问题，因此我们得有一套解决方案。CSS中的media queries（媒体查询）API可以做到。

2.mobile-first原则

我们可能会如下使用media queries：

 

/*Large screen styles first - Avoid*/
.product-img {
      width: 50%;
      float: left;
}
@media screen and (max-width: 40.5em) {
    .product-img {
              width: auto;
             float: none;
        }
}

 

 这样写的思路是：先设置图片的全局样式为width:50%;float:left，当屏幕尺寸小于40.5em时使用width:auto;float:none样式。

而如果应用mobile-first原则，就应该这么写：

 

@media screen and (min-width: 40.5em) {
    .product-img {
              width: 50%;
             float: left;
        }
}

 

 这样写的思路是：屏幕尺寸大于40.5em时应用该样式。我们不应该先定义大屏幕的样式，然后针对其它小屏幕再重写这些样式，而是直接从小屏幕入手。这样写还有另外一个好处就是对于不支持media queries的手机来说，它会使用第一个query的样式。

3.使用media queries

使用media queries标记要遵守mobile-first原则，这样代码比较简洁，还有利于维护，例如：

 

/*Default styles*/
.related-products li {
	float: left;
	width: 50%;
}

/*Display 3 per row for mobile phones in landscape or smaller tablets*/
@media screen and (min-width: 28.75em) {
	.related-products li {
		width: 33.3333333%;
	}
}
/*Display 6 to a row for medium tablets and up */
@media screen and min-width: 40.5em) {
	.related-products li {
		width: 16.6666667%;
	}
}

 

 该样式实现了当屏幕尺寸改变时，会动态改变每行显示图片的个数，如果有额外的需求，只需要插入对应的屏幕分界点就可以了。

4.使用css来减少请求

有些图片可以通过CSS3的background来代替，或者是data-uris。每张图片都会去请求服务器，而通过css就会减少这次请求，从而加快响应速度。可以参看http://tech.groups.yahoo.com/group/mobile-web/message/609

5.延迟加载

可以通过javascript来实现延迟加载，参见http://labjs.com/

6.离线访问

参见http://www.html5rocks.com/en/features/offline

参考demo：http://bradfrostweb.com/demo/mobile-first/

 

文中相关资源：

https://speakerdeck.com/u/tkadlec/p/optimizing-for-mobile-performance （优化mobile）

http://www.html5rocks.com/en/tutorials/appcache/beginner/ （缓存）

http://www.html5rocks.com/en/features/offline （离线）

http://www.alistapart.com/articles/fluidgrids/ （Fluid grid）

http://adactio.com/journal/4494/  （window phone media queries）

https://github.com/scottjehl/Respond （respond.js 不支持media queries的实现方案）

http://www.alistapart.com/articles/responsive-web-design/ （responsive web design）

http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu （rethinking the mobile web）

http://mediaqueri.es/