昨天中午Google进行了一次在线讲座，讲述自适应网页设计的概念和方法，维护同一个网页代码，即可使网站在多种浏览设备（从桌面电脑显示器到智能手机或其他移动产品设备）上具有更好的阅读体验，这里我将该讲座内容简要的整理一下。
这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。
3、布局宽度使用相对宽度。
网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在@mediascreenand(max-device-width:480px)里面增加各个div的针对小屏幕的宽度，实际上更麻烦。
4、页面使用相对字体（非必要）
在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用em=px/16换算，例如16px就等于1em。
5、图片自适应（非必要）
css加载的background-image如何自适应大小呢，其实CSS3中是可以实现的，添加如下语句：background-size:100%100%;
根据上面讲述的几点内容，我针对我博客的CSS进行了一些修改，发现可以从iPhone手机浏览到体验更佳的页面，但有一个问题没有解决，就是顶部导航栏navbar显示有问题，换行后被下面的文章盖住了，不知道怎样能更好地解决这个问题（更新：经过网友提示，在导航栏divNavbar的样式里，加入 white-space:nowrap;overflow:hidden; 即可解决这个问题）。
总之，根据上面四步进行修改的话，可以很简单地将一个网站修改为适合多种设备浏览的页面，这对于通过手机访问网站的用户来说，的确是一件好事。
最后，分享一下Google关于自适应网页设计的讲座的视频地址，在线观看请点这里。
扫描二维码推送至手机访问。
2浏览网站结构优化
2浏览外部链接建设
2浏览自媒体运营与推广
相关推荐
