11、自适应移动网站设计全攻略

自适应移动网站设计全攻略

1. 添加移动样式

当媒体查询准备好后，就需要决定如何为移动浏览器改变网站样式。可以先创建网站在移动设备上的模拟样式，但要清楚这种方法的局限性，也可以先在代码中测试一些更改。

1.1 将更改添加到 @Media

为移动浏览器更改网站的基本过程是将移动网站的 CSS 样式放在 @media 标签内。当定义的媒体类型或特性属性满足时，这些样式将应用到网站上。可以减少列数、修改内容区域的宽度、增大按钮和链接的尺寸，以及隐藏移动设备不需要的项目。

下面是一个示例，常规网站的头部宽度为 960px，但在小的移动屏幕上，媒体查询会将其宽度改为 320px，覆盖原来的宽度。对于 logo，会加载一个替代的移动 logo 图片作为 CSS 背景图片，并且缩小 div 的尺寸。

常规网站的 CSS 示例：

#header { 
    float:left; 
    width:960px;  
    height:105px; 
    background:url(images/header-bg.jpg) no-repeat;  
}  
h1#logo, a#logo {  
    width:312px;  
    height:102px;  
    background:url(images/logo.png) no-repeat; 
    float:left; 
    margin:0; 
    padding:0; 
}

移动网站的 CSS 示例，当浏览器宽度小于 480px 时应