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

本文介绍了移动优先的设计理念，利用CSS3的媒体查询实现不同屏幕尺寸下的布局调整，并探讨了如何通过CSS背景和数据URI减少图片请求，以及使用JavaScript进行延迟加载等优化手段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1.适配的问题

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

2.mobile-first原则

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

   Html代码  
   
  
 /*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原则，就应该这么写：

   Java代码  
   
  
 @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原则，这样代码比较简洁，还有利于维护，例如：

   Html代码  
   
  
 /*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%;  
     }  
 }  