? 响应式网页设计及其对SEO的影响 - 金戈铁马SEO培训网
當前位置 : 超級SEO培訓網 / SEO技術

響應式網頁設計及其對SEO的影響

金戈鐵馬SEO培訓網   http://www.sdcdrg.com/   January-17 20:43:35

當下越來越多的人離不開手機,使用手機上網成了生活習慣,移動設備逐步成為人們訪問互聯網的最常見終端。但你是否知道如何才能在不同大小的設備,例如手機、平板電腦與PC端上顯示同一個網頁,讓同一個網頁自動適應不同大小的屏幕,根據屏幕寬度自動調整布局呢?這就不得不提到我們今天討論的主題:響應式網頁設計。

所謂“響應式網頁設計(Responsive Web Design)”也就是可以自動識別屏幕寬度、并做出相應調整的網頁設計。目前這種設計已經逐步被很多網站采納,Google也已經明確表明鼓勵響應式網頁設計。

 

你應該已經基本理解了響應式網頁設計的含義,那么該如何實現響應式網頁設計呢?

一、網頁寬度自動調整

在網頁代碼的頭部,加入viewport元標簽。

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

viewport是網頁默認的寬度和高度,上面這行代碼的意思是,網頁寬度默認等于屏幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1。0,即網頁初始大小占屏幕面積的100%。

所有主流瀏覽器都支持這個設置,包括IE9。對于那些老式瀏覽器(主要是IE6、7、8),需要使用css3-mediaqueries.js。

<!–[if  lt IE 9]>
<script  src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]–>

二、不適用絕對寬度

由于網頁會根據屏幕寬度調整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬度的元素。這一條非常重要。

CSS代碼不能指定像素寬度:

width:xxx px;

只能指定百分比寬度:

width: xx%;

或者:

width:auto;

三、使用相對大小的字體

字體也不能使用絕對大小(px),而只能使用相對大小(em)。

body {font: normal 100% Helvetica, Arial, sans-serif;}

上面的代碼指定,字體大小是頁面默認大小的100%,即16像素。

h1 {font-size: 1.5em;}

然后,h1的大小是默認大小的1。5倍,即24像素(24/16=1。5)。

small {font-size: 0。875em;}

small元素的大小是默認大小的0。875倍,即14像素(14/16=0。875)。

四、采用流動布局的形式

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

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

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

流動布局的好處是,如果寬度太小,放不下兩個元素,后面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢出),避免了水平滾動條的出現。

另外,絕對定位(position: absolute)的使用,也要非常小心。

五、選擇加載CSS

響應式網頁設計的核心,就是CSS3引入的Media Query模塊。它的意思就是,自動探測屏幕寬度,然后加載相應的CSS文件。

<link rel=”stylesheet” type=”text/css”
media=”screen and (max-device-width: 400px)”
href=”tinyScreen.css” />

上面的代碼意思是,如果屏幕寬度小于400像素(max-device-width: 400px),就加載tinyScreen.css文件。

<link rel=”stylesheet” type=”text/css”
media=”screen and (min-width: 400px) and (max-device-width: 600px)”
href=”smallScreen.css” />

如果屏幕寬度在400像素到600像素之間,則加載smallScreen。css文件。

除了用html標簽加載CSS文件,還可以在現有CSS文件中加載。

@import url(“tinyScreen。css”) screen and (max-device-width: 400px);

六、實現圖片的自動縮放

除了布局和文本,響應式網頁設計還必須實現圖片的自動縮放。這只要一行CSS代碼:

img { max-width: 100%;}

這行代碼對于大多數嵌入網頁的視頻也有效,所以可以寫成:

img, object { max-width: 100%;}

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

img { width: 100%; }

此外,windows平臺縮放圖片時,可能出現圖像失真現象。這時,可以嘗試使用IE的專有命令:

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

不過,有條件的話,最好還是根據不同大小的屏幕,加載不同分辨率的圖片。有很多方法可以做到這一條,服務器端和客戶端都可以實現。

 

響應式網頁設計對我們SEO有著怎樣的影響呢?

五大好處:

1。 提升用戶體驗

2. SEO策略一致性(無網頁版本區分)

3. 避免重復內容

4. 網頁原有鏈接得以保留

5. 搜索引擎青睞

兩點缺陷:

1. 用戶瀏覽器版本限制(對老版本IE支持效果不理想)

2. 網頁內容限制(網頁內容不支持移動設備觀看)

 


本文來自金戈鐵馬SEO培訓網(www.sdcdrg.com),轉摘請注明出處。

體驗版課程下載

學員成果分享

山东群英会走势图表 华夏彩票注册 2019国外挂机网赚 时时彩注册 pk10怎么玩 2019最好的网赚项目 19年网赚钱商机 有没有什么靠谱的网赚 华夏网赚论坛官网华夏网赚论坛福缘网赚论坛网 中创网赚是骗人的吗