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

響應式網頁設計教程

作者: admin 发布: 2014-10-9 10:45:6 分类: 網站建設 閱讀: 次 查看評論

  自适应网页设计 響應式網頁設計 响应式 移动建站

  做过wap站、做过siteApp、做过第三方,也做过独立APP,现在又做了个自适应的模板。所谓“響應式網頁設計(Responsive Web Design)”也就是自适应,就是可以自动识别屏幕宽度、并做出相应调整的网页设计。就是输入本站域名,手机、平板、PC端显示的效果不同的,但是URL确是相同的。

  響應式網站,利于SEO(統一了URL),利于用戶體驗,也利于用戶分享,如下圖所示:

  自适应网页设计 響應式網頁設計 响应式 移动建站

  (圖爲iphone顯示效果)

  自适应网页设计 響應式網頁設計 响应式 移动建站

  (圖爲ipad顯示效果,注意導航的變化)

  自适应网页设计 響應式網頁設計 响应式 移动建站

  (圖爲安卓手機微信上顯示效果)

  自适应网页设计 響應式網頁設計 响应式 移动建站

  (PC版的直接就是現在這個界面了)

  這是怎麽做的呢?

  其實完全是靠張力博主(QQ445671696)的鼎力相助,他用的是本站移植到Wordpress的模板,後面經過多次修正與完善,制作了響應式的網頁模板,後自發的爲我制作了一套z-blog的自適應模板,可謂青出于藍而勝于藍。

  在他的協助下,我只用了一個下午時間,把盧松松博客的全站替換成了自適應主題。

  核心內容在于:導航欄和CSS的兩個變化。

  希望學習的朋友請自行查看本站源代碼,請注意:

  1,網站導航兩個,一個PC端,一個移動端,注意加粗部分。

  PC段導航:

  自适应网页设计 響應式網頁設計 响应式 移动建站

  <div id="nav">

  <#CACHE_INCLUDE_NAVBAR#>

  </div>

  移動端導航:

  自适应网页设计 響應式網頁設計 响应式 移动建站

  <nav id="navs-wrap">

  <div id="logos"><h1><a href="<#ZC_BLOG_HOST#>" title="<#ZC_BLOG_TITLE#>"><#ZC_BLOG_TITLE#></a></h1></div>

  <ul id="navs" class="menu"><#CACHE_INCLUDE_FUNCTION28#></ul>

  </nav>

  請注意HTML源文件裏的一個判斷語句:

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

  在head裏加入這條元標簽,那移動浏覽器中頁面將以原始大小顯示,並不能縮放。不讓浏覽器縮放目的是保證網頁能自適應屏幕的完整性,避免網頁混亂。

  width - viewport的宽度 height - viewport的高度

  initial-scale - 初始的缩放比例

  minimum-scale - 允许用户缩放到的最小比例

  maximum-scale - 允许用户缩放到的最大比例

  user-scalable - 用户是否可以手动缩放

  那麽問題來了,如何讓浏覽器判斷設備尺寸呢?

  有兩種方式,一種是直接在link中判斷設備的尺寸,然後引用不同的css文件,棄用。原因是博客CSS文件不大代碼也不多,不需要多個CSS文件,也能減少並發。

  第二種就是我現在用的這種,請直接查看本站CSS文件,

  核心代码来了,开始研究响应式web设计朋友,CSS3 Media Queries是入门。

  在CSS中加入語句:

[email protected] screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/

  大家可以看到我博客裏有多個判斷,1024px,768px,650px,500px,400px,350px。

  這意味著寬度在1024px以下的屏幕,我博客會呈現六種不同的效果。但爲了保證網頁的連續性與完整性,同時也是圖省事,下面六個CSS幾乎相同。

  唯一不同的是加入了display:none,不顯示某些內容。所以通過CSS觀察發現,屏幕越小,顯示的內容就越來越少。

  這也是文章開頭爲什麽pad和移動端顯示的界面不同的原因之一。

  要注意的是由于網頁會根據屏幕寬度調整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬度的元素。這一條非常重要,否則會出現橫向滾動條。

  參考代碼:

  核心CSS文件,適用于任何程序http://lusongsong.com/zb_users/theme/LuSongSong/style/LuSongSong-Index.css

  代碼文件,鼠標右鍵查看本站源代碼(注意導航代碼的變化),此代碼僅供zblog用戶參考。

  圖省事的、試用WP系統的朋友可直接下載張力博客提供的WordPress主題:http://zhangliseo.com/wp-didiao

  使用asp版盧松松主題的朋友,可以直接把本站的CSS拿去用。

  總結:

  只要制作兩個導航,能看懂CSS文件就可以搞定,照貓畫虎,人人都能做出響應式的網頁設計,看似很難,實際上很簡單。

  原標題:響應式網頁設計的快速教程(適合個人站)

  作者:盧松松博客(微信號/QQ號:13340454),轉載請保留出處!

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

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

評論列表:

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