viewport自适应网设计的方法转

1、viewport 自适应网页设计的方法（转）昨天中午 Google 进行了一次在线讲座， 讲述自适应网页 设计的概念和方法，维护同一个网页代码，即可使网站在多 种浏览设备（从桌面电脑显示器到智能手机或其他移动产品 设备）上具有更好的阅读体验，这里我将该讲座内容简要的 整理一下。 1、在 HTML 头部增加 viewport 标签。 在网 站 HTML 文件的开头，增加 viewport meta 标签告诉浏览器 视口宽度等于设备屏幕宽度， 且不进行初始缩放。 代码如下： <meta name=viewport content=width=device-width, initial-sca

2、le=1 /> 这段代码支持 Chrome、Firefox 、IE9 以上的浏览器， 但不支持 IE8 以及低于 IE8 的浏览器。2、在 CSS 文件尾部增加针对不同屏幕分辨率的规则。 例如 使用如下的代码，可以让屏幕宽度低于 480 像素的设备（如 iPhone 等），网页侧栏隐藏中部内容栏宽度自动调节。以下 代码针对 乙Blog , WordPress相关标签名称只需修改一下即 可。 media screen and （max-device-width: 480px） #divMainfloat: none; width:auto;#divSidebar display:none;

3、 3、布局宽度使用相对宽度。 网页总体框架可以使 用绝对宽度， 但往下的内容框架、 侧栏等最好使用相对宽度， 这样针对不同分辨率进行修改就方便。当然也可以不用相对 宽度，那就需要在 media screen and （max-device-width: 480px） 里面增加各个 div 的针对小屏幕的宽度， 实际上更麻 烦。4、页面使用相对字体（非必要）在 HTML 页面上不要使用绝对字体（px）,而要使用相对字体（em）,对 于大多数浏览器来说，通常用 em = px/16 换算，例如 16px 就等于 1em。5、图片自适应（非必要）img 标签的话，只需要设置 max-width: 1

4、00%; 或 width:100%; 语句为： img max-width: 98%; css 加载的 background-image 如何自适应大小呢，其实 CSS3 中是可以实现的，添加如下语 句：background-size:100% 100%;根据上面讲述的几点内容，我针对我博客的CSS进行了一些修改，发现可以从iPhone 手机浏览到体验更佳的页面，但有一个问题没有解决，就是 顶部导航栏 navbar 显示有问题，换行后被下面的文章盖住 了，不知道怎样能更好地解决这个问题（更新：经过网友提 示，在导航栏 divNavbar 的样式里，加入 white-space:nowrap; overflow:hidden; 即可解决这个问题） 。 下图是使用iPhone访问的，经过修改CSS为自适应网页后的月光博客首 页页面，看起来比原始的未优化页面好多了吧。 总之，根据上面四步