自适应网页设计的方法

偏执的太偏执、 2022-08-14 00:58 200阅读 0赞

昨天中午Google进行了一次在线讲座，讲述自适应网页设计的概念和方法，维护同一个网页代码，即可使网站在多种浏览设备（从桌面电脑显示器到智能手机或其他移动产品设备）上具有更好的阅读体验，这里我将该讲座内容简要的整理一下。

1、在HTML头部增加viewport标签。

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

<meta name="viewport" content="width=device-width, initial-scale=1" />

这段代码支持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。

5、图片自适应（非必要）

img标签的话，只需要设置 max-width: 100%;或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为自适应网页后的月光博客首页页面，看起来比原始的未优化页面好多了吧。

![月光博客][3686_1.jpg]

总之，根据上面四步进行修改的话，可以很简单地将一个网站修改为适合多种设备浏览的页面，这对于通过手机访问网站的用户来说，的确是一件好事。

[3686_1.jpg]: /images/20220810/db6ce165c7e14926a8f3bcbcdf0adee9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，200人围观）

还没有评论，来说两句吧...

相关阅读

相关自适应网页

[http://www.ruanyifeng.com/blog/2012/05/responsive\_web\_design.html][http_www.ruanyifen

短命女/ 2022年09月21日 13:13/ 0 赞/ 191 阅读

相关自适应网页设计的方法

昨天中午Google进行了一次在线讲座，讲述自适应网页设计的概念和方法，维护同一个网页代码，即可使网站在多种浏览设备（从桌面电脑显示器到智能手机或其他移动产品设备）上具有更好的

偏执的太偏执、/ 2022年08月14日 00:58/ 0 赞/ 201 阅读

相关如何设计自适应网页

现在的网站不仅需要兼容各种浏览器还需要能自适应不同终端，今天总结下常用来设计自适应网页设计的步骤。 > 网页自适应设备 <meta name="viewport"

迷南。/ 2022年07月29日 09:28/ 0 赞/ 171 阅读

相关编写自适应网页——media

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

女爷i/ 2022年06月03日 09:53/ 0 赞/ 235 阅读

相关网页自适应

h5: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>

比眉伴天荒/ 2022年05月19日 11:16/ 0 赞/ 223 阅读

相关 HTML5----响应式（自适应）网页设计

第一步：在网页代码的头部，加入一行viewport元标签 1. <meta name="viewport" content="width=device-width, ini

以你之姓@/ 2022年05月19日 10:37/ 0 赞/ 240 阅读

相关自适应网页设计

一、自适应网页设计基础 1. 允许网页宽度自动调整首先，在网页头部加入viewport元标签 <meta name="viewport"

我就是我/ 2022年04月16日 06:42/ 0 赞/ 233 阅读

相关自适应网页设计/响应式Web设计

随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？

短命女/ 2022年01月10日 10:09/ 0 赞/ 385 阅读

相关 HTML5----响应式（自适应）网页设计

现在，很多项目都需要做响应式或者自适应的来适应我们不同屏幕尺寸的手机，电脑等设备，那么就需要我们在页面上下功夫，下面我就来说一下如何做响应式（自适应）的网页设计 1、在

亦凉/ 2021年10月01日 03:30/ 0 赞/ 392 阅读

相关手机web——自适应网页设计（html/css控制）

转自：[http://mobile.51cto.com/ahot-409516.htm][http_mobile.51cto.com_ahot-409516.htm]

淡淡的烟草味﹌/ 2021年06月24日 14:35/ 0 赞/ 481 阅读