您現在的位置: 网站首頁 / seo優化 / 正文

【響應式網頁設計】自適應站點如何做到對百度友好

作者: admin 发布: 2015-10-30 23:0:9 分类: seo優化 閱讀: 次 查看評論

  自適應也叫響應式,指可以自動識別屏幕寬度、並做出相應調整的網頁設計。目前被越來越多的站點所使用。同時百度也公開宣稱鼓勵大家用HTML5技術打造在PC站和移動站都能讓用戶有良好體驗的站點。那麽自適應站點在代碼上需要做出哪些調整可以對百度更加友好呢?我們來看看皮皮魯網SEO負責人蔣飛的分享。

  一、什麽樣的網站適合做自適應

  自适应网页设计(Responsive Web Design)是指可以自动识别终端设备屏幕的大小从而做出相应调整的网页设计方法。这种网页设计方法完美解决了如何在不同大小的网络设备上呈现同样的网页效果。大家公认自适应至少有4个好处:提升用户体验;PC端和移动端SEO保持一致;避免重复内容和出错内容;链接统一。

  而自適應比較明顯的缺陷是,開發成本比較高,尤其是要構建包含額外編程的複雜的自適應網站,所需的時間會比較長。如果網站需求較簡單,有許多開源模板可供選擇。

  對于已經比較成熟PC網站來說,如果要實現全站的自適應,有可能需要推掉原來所有的代碼進行重構,時間和技術成本都比較大,而且如果一個網站有多個portal(入口),會大大增加架構設計的複雜度,所以現在有很多網站只在移動端實現了響應式布局設計。

  二、自適應網頁代碼上需要做出哪些調整

  1、 阻止移动浏览器自动调整页面大小

  iOS和Android浏览器都基于webkit核心,这两种浏览器以及其他的很多浏览器都支持viewport meta元素覆盖默认的画布缩放设置,只需在HTML的<head>标签中插入一个<meta>标签,<meta>标签中可以设置具体的宽度(如像素值)或者缩放比例2.0(设备实际尺寸的两倍),下面是将一个页面放大到设备实际尺寸两倍显示的meta标签示例:

  <meta name=”viewport” content=”initial-scale=2.0,width=device-width”/>

  2、將網頁修改爲百分比布局

  当某个浏览窗口处于媒体查询固定的范围之外,网页就需要水平滚动才能完整浏览,而通过百分比布局可以页面元素根据窗口大小在一个又一个媒体查询之间灵活修正样式,具体来讲,就是css代码不会指定具体像素宽度:width:xxx px;而是会指定一个百分比宽度:width:xx%;或者直接就是width:auto;这里大家可以根据一个简易的公式将固定像素宽度转换成对应的百分比宽度:目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度

  例如:

  <div id =”wraper”>

  <divid = “header”></div>

  </div>

  #wrapper {

  margin-right: auto;

  margin-left: auto;

  width: 960px;

  }

  #header {

  margin-right: 10px;

  margin-left:10px;

  width: 940px;

  }

  轉換爲百分比的header區塊的css爲:

  #header {

  margin-right: 10px;

  margin-left: 10px;

  width: 97.916667% /* 940 ÷ 960 */

  }

  3、用em替換px

  同样,目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度这个公式也适用于将文字的像素单位转换为相对单位,值得注意的是,现代浏览器的默认文字都是16像素,因此一开始给body标签应用下列任何一条规则所产生的效果都一样:

  font-size: 100%;

  font-size:16px;

  font-size: 1em;

  例如某網站網站標題相應的樣式:

  #logo {

  display: block;

  padding-top: 75px;

  color: #0d0c0c;

  font-family: Arial;

  font-size: 48px;

  }

  修改後的樣式如下:

  #logo{

  display: block;

  padding-top: 75px;

  color: #0d0c0c;

  font-family:Arial;

  font-size:3em /* 48 ÷ 16 */

  }

  4、流动布局(fluid grid)的使用

  “流動布局”指的是各個區塊的位置都浮動,不是固定不變的。

  .main {float: right;width: 70%;}

  .leftBar {float: left;width: 25%;}

  這麽做的好處是,如果寬度太小,放不下兩個元素,後面的元素會自動滾動到前面元素的下方,不會在水平方向溢出,避免了水平滾動條的出現,大大提升了用戶的閱讀體驗。另外,絕對定位(position:absolute)的使用,也要非常小心。

  5、Media Query技术的使用

  在自适应设计的技术中,css3支持css2.1定义的媒体类型,同时添加了很多涉及媒体类型的功能属性,包括max-width(最大宽度),device-width(设备宽度,orientation(屏幕定向:横屏或竖屏),因此可以通过Media Query加载相应的CSS文件. 例如,下面代码定义了如果页面通过屏幕呈现,并且屏幕宽度不超过480px,则加载shetland.css

  <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />

  同样可以创建多个样式表,以适应不同设备或者不同分辨率的宽度范围,当然更有效的做法是将多个Media Query整合在一个样式表文件中:

[email protected] only screen and (min-devece-width: 320px) and (max-device-width: 480px) {

  /* Styles */

  }

[email protected] screen and (min-width: 600px) {

  .hereIsMyClass {

  width: 30%;

  float: right;

  }

  上面的代碼中定義的樣式類只有在浏覽器屏幕寬度超過600px時才會有效。

  因此,使用min-width和max-width可以同时判断屏幕尺寸与浏览器实际宽度,如果希望通过Media Query作用于某种特定设备,但忽略在其上运行的浏览器是否由于没有最大化尺寸与设备屏幕尺寸不一致,则可以使用max-device-width和max-device-width属性来判断设备本身屏幕尺寸。

  Media Query不是唯一的解决方案,同样可以通过Javascript来实现自适应设计,特别是某些旧浏览器无法完美支持CSS3的Media Query时,它可以作为备选方案。当然,我们仍然能借助专业的Javascript库来帮助旧浏览器(IE5+,Firefox 1+,Safari 2等)支持CSS3的Media Queries.使用方法:下载css3-mediaqueries.js,然后在页面中调用它即可,例如:

  <!--[if lt IE 9]>

  <script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>

  <![endif]-->

  6、 设计响应式图片

  有很多同比縮放圖片的技術,其中有不少是簡單易行的,比較流行的方法是使用CSS的max-width屬性:

  img { max-width: 100%;}

  老版本的IE不支持max-width,所以只好寫成:

  img { width: 100%; }此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:

  img { -ms-interpolation-mode: bicubic; }

  或者,Ethan Marcotte的imgSizer.js。

  addLoadEvent(function() {

  var imgs =

  ocument.getElementById("content").getElementsByTagName("img");

  imgSizer.collate(imgs);

  });

  如果有條件的話,最好能根據屏幕的不同大小,加載不同分辨率的圖片。

  三、 自适应站点对百度友好的关键

  1,applicable-device標注應該怎麽寫

  有了自適應設計的網頁,還要照顧到對百度友好的設計,即告訴百度“我是自適應頁面”方便百度進行識別校驗。方法也很簡單,只要在上面viewport標簽下面再添加一個applicable-device標簽就行:

  <meta name="applicable-device" content="pc,mobile">

  表示頁面同時適合在移動設備和PC上進行浏覽。

  2, 在使用百度站长平台链接提交工具的sitemp进行提交时,要做mobile type标记,具体取值:

  <mobile:mobile type="pc,mobile"/>

  其他網頁取值如下:

  <mobile:mobile/> :移动网页

  <mobile:mobile type="mobile"/> :移动网页

  <mobile:mobile type="htmladapt"/>:代码适配

  無該上述標簽表示爲PC網頁

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

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

評論列表:

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