您現在的位置: 网站首頁 / 網站建設 / 正文

自適應網頁設計的方法

作者: admin 发布: 2013-12-8 19:22:35 分类: 網站建設 閱讀: 次 查看評論

  昨天中午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相關標簽名稱只需修改一下即可。

[email protected] 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顯示有問題,換行後被下面的文章蓋住了,不知道怎樣能更好地解決這個問題。

  總之,根據上面四步進行修改的話,可以很簡單地將一個網站修改爲適合多種設備浏覽的頁面,這對于通過手機訪問網站的用戶來說,的確是一件好事。

  來源:SEO搜尋引擎優化 - SEO自學網 轉載注明出處!

? 上一篇下一篇 ?   本文關鍵詞: 響應式網頁設計  

評論列表:

站長SEO學院
第一節:百度搜索引擎工作原理
第二節:建設對搜索引擎友好的站點
第三節:如何進行網站內容建設
第四節:整體優化、結構優化、網頁優化
第五節:移動搜索-明確移動搜索優化標准
百度SEO資料文檔
百度搜索引擎優化指南2.0
百度移動搜索優化指南2.0
網站分析白皮書(站長版)
移動站點該如何優化
建設對百度友好的站點
百度搜索引擎網頁質量白皮書
石榴算法-綠蘿算法-冰桶算法
新搜索時代下的優化策略
更多百度SEO資料文檔
站長推薦
DIV+CSS布局實例教程-Web標准
网站SEO優化常见问题汇总
SEO優化推广方案该如何写
SEO優化方案步骤
影響網站關鍵詞排名因素總結
影響谷歌搜索引擎排名的因素調查
手機移動端站點適配優化
最近發表