青青子衿, 悠悠我心, 但为君故, 沉吟至今
« 程序员浪费生命的几种方式库巴网的兴衰之路 »

自适应网页设计的方法

  昨天中午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为自适应网页后的月光博客首页页面,看起来比原始的未优化页面好多了吧。

月光博客

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

  最后,分享一下Google关于自适应网页设计的讲座的视频地址,在线观看请点这里



  除非注明,月光博客文章均为原创,转载请以链接形式标明本文地址

  本文地址:http://www.williamlong.info/archives/3686.html
  • 文章排行:
  • 1.小李按摩博客
  • 这博客知识很全面,我会经常来的!
  • 2013/12/16 10:36:50   支持(14)反对(4) 回复
  • 2.ww
  • 顶一个,顶一个,顶一个,顶一个
    ww 于 2015-1-28 16:30:22 回复
    顶一个,顶一个,顶一个
  • 2015/1/28 16:03:03   支持(7)反对(3) 回复
  • 4.大豆异黄酮
  • 这个很有用!平时看手机网页的时候就是很难看的那种。现在可以调调
  • 2013/12/23 14:24:26   支持(7)反对(5) 回复
  • 5.yanwushu
  • 可否将将在线讲座的地址贴出来呀
    williamlong 于 2013-12-9 9:14:57 回复
    地址: t dot cn/8kqLJin
  • 2013/12/8 9:43:31   支持(8)反对(7) 回复
  • 8.夏
  • 为什么我在网站里加了这段代码后。在苹果6和IPAD上面看网站是好的但是在苹果4和一些手机上面下面的内容还是有点空白的。。。求大神教我 QQ是494863945.
  • 2015/9/15 11:29:28   支持(2)反对(1) 回复
  • 9.大鹏小嘚吧
  • 这个太有用了,这两天正在制定前端规范呢。
  • 2013/12/8 23:21:47   支持(5)反对(5) 回复
  • 10.may
  • 只能适应移动端,web端不可以么?做了一个例子,web不可以。
    代码如下:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1" />


    <style>

    div{
    border:1px solid black;
    background-color:pink;
    float:left;
    }
    .test{
    font-size:2em;
    width:800px;
    height:20%;
    }
    @media screen and (max-device-width: 480px) {
    .test{
    float: none;
    width:auto;
    }
    }
    </style>
    <script>


    </script>
    </head>

    <body>
    <div class="test">
    你好吗。hello word
    </div>
    </body>
    </html>

  • 2014/7/16 15:30:41   支持(6)反对(6) 回复
  • 11.LanaoHK
  • 谷歌并给予响应网站的优先事项。尼斯博客阅读
  • 2016/5/4 16:56:41   支持(0)反对(0) 回复
  • 12.不理解
  • em = px/16 ,例如16px就等于1em
  • 2013/12/7 21:34:37   支持(16)反对(17) 回复
  • 13.文字纠错者
  • 根据上面讲述的几点内容,我针对我博客的CSS进行了一些修改,发现可以从iPhone手机浏览到体验更加的页面。

    体验更加---体验更佳
  • 2013/12/8 20:29:06   支持(8)反对(9) 回复
  • 14.叫我小T
  • 呃,关于字体单位em的说法不太准确,你也说了这是相对字体,如果它总是固定等于16px,那怎么可能还叫相对字体?
    这个em是一个相对的单位,1em=一个字的大小,比如首行缩进两个字符就是用“text-indent:2em;”这样的写法。之所以经常说1em=16px,是因为绝大多数浏览器默认情况下1em=16px,而如果你自行设置了样式改变了字体大小,相对字体大小的单位em也会随之变化。
    而且em能够继承,也就是说父元素设置了font-size:16px,子元素设置font-size:0.9em,那么子元素字体大小就是16*0.9=14px;然后子元素的子元素再设置个font-size:0.9em,那子元素的子元素的字体大小就是14*0.9px。
    williamlong 于 2013-12-8 23:54:49 回复
    是的,我这里描述的不太准确,讲师也没讲清楚。
  • 2013/12/8 23:48:11   支持(9)反对(10) 回复
  • 16.佳友博客
  • 我用wp。。PC一个主题。。移动一个主题。。

    加一个插件自动判断搞定的。。。
  • 2013/12/12 1:17:41   支持(10)反对(12) 回复
  • 17.shenger
  • 实际上对导航的处理方法是将换行后的隐藏了,其实这一块最好的办法是再做一次媒体查询然后针对iPhone这样的小屏幕,把正文内容距离导航的距离拉大应该能解决的
  • 2013/12/9 8:24:36   支持(7)反对(11) 回复
  • 18.达人家园
  • 很有用,多谢月光分享。
  • 2013/12/11 12:16:08   支持(10)反对(14) 回复
  • 19.田原
  • 请老大帮我看看,我用的是wordpress的主题Prower,也是自适应的,一开始什么都正常,但是到了上个星期,突然发现手机浏览变成了一个缩微版的网页,必须进行放大才能看清文字。我也不知道是不是我的代码哪里被改动了?
    请老大们帮着看看,我的QQ26105665
    网址:iydu.net(我不是故意要发链接的,实在是不知道该怎么办,月光老大就饶了我这次吧……)
    田原 于 2013-12-9 15:24:31 回复
    已经可以了,按照月光大大的说法,在HTML头部增加viewport标签就解决问题了!
    谢谢月光大大!
  • 2013/12/9 12:15:23   支持(8)反对(13) 回复
  • 21.江米小枣tonylua
  • 基本是不做真正有价值网页不考虑带宽的的人拿来做概念性演讲的
  • 2013/12/9 11:20:41   支持(4)反对(11) 回复

发表评论:

 请勿发送垃圾信息、广告、推广信息或链接,这样的信息将会被直接删除。

订阅博客

  • 订阅我的博客:订阅我的博客
  • 关注新浪微博:关注新浪微博
  • 关注腾讯微博:关注腾讯微博
  • 关注认证空间:关注QQ空间
  • 通过电子邮件订阅
  • 通过QQ邮件订阅

站内搜索

热文排行


月度排行

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享. 转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议.
This site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.