Google进行一次在线讲座,讲述自适应网页设计的概念和方法 自适应网页设计的方法

摘要：谷歌昨天中午举行了一次在线讲座，讲述了自适应网页设计的概念和方法，并维护了相同的网页代码，这样网站就可以在各种浏览设备（从桌面电脑显示器到智能手机或其他移动产品设备）上有更好的阅读体验。在这里我将谈谈...

昨天中午谷歌在线讲座，讲述自适应网页设计的概念和方法，维护相同的网页代码，可以使网站在各种浏览设备（从桌面电脑显示到智能手机或其他移动产品设备）有更好的阅读体验，这里我将简要整理讲座内容。

1、将viewport标签添加到HTML头部。

在网站HTML文件的开头，添加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，不进行初始缩放。代码如下:

支持此代码

Chrome、

Firefox、超过IE9的浏览器，但不支持IE8和低于IE8的浏览器。

2、在CSS文件的末尾增加不同屏幕分辨率的规则。

例如，使用以下代码可以自动调整屏幕宽度低于480像素的设备（如iPhone等），并将中间内容栏的宽度隐藏在网页侧栏中。以下代码针对Z-Blog，WordPress相关标签名称只需修改即可。

@media screen and (max-device-width: 480px) {#divMain{float: none;width:auto;}#divSidebar {display:none;}}

3、相对宽度用于布局宽度。

网页的整体框架可以使用绝对宽度，但最好使用相对宽度，如向下的内容框架和侧栏，以便于修改不同的分辨率。当然，你不能使用相对宽度，这需要 @media screen and (max-device-width: 480px) 在小屏幕上增加每个div的宽度实际上更麻烦。

4、页面使用相对字体

不要在HTML页面上使用绝对字体（px），使用相对字体（em），两者的转换关系是：em = px/16 ，例如，16px等于1em。

根据以上内容，我对我的博客CSS进行了一些修改，发现你可以从iPhone浏览到体验更多的页面，但有一个问题没有解决，是顶部导航栏navbar显示问题，改变后被以下文章覆盖，不知道如何更好地解决这个问题。

简而言之，根据以上四个步骤，您可以简单地将网站修改为适合各种设备浏览的页面，这对通过手机访问网站的用户来说确实是一件好事。