DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁SEO優化 >> SEO最新資訊 >> 谷歌搜索算法 >> 移動站如何制作響應式頁面
移動站如何制作響應式頁面
編輯:谷歌搜索算法     

我們上一篇說到,響應式的網站更有利於SEO。那如何建立一個響應式的網站呢?如果希望建一個復雜的響應式網站,這篇文章很難幫到你。但是我們可以給你一些常見響應式問題的解決方案。

一、界面的響應式

我們的網站需要根據屏幕的大小,自動縮放,完全適應頁面的變化。這裡可以用到一段代碼

.body{

  max-width:800px;

  margin:0 auto;

  padding:0;

}

這段css代碼定義我們網站主體最大寬度是800px,小於800px會自動縮小,大於800px的屏幕,只顯示800px,網站主體內容是居中的。


二、圖片的響應式

我們的發現在手機端的圖片經常超出屏幕的大小,這是因為你圖片並沒有跟著屏幕一起縮放。這裡我們用到的代碼是

img {max-width:100%;}

這段css代碼就確定了圖片永遠不會大於他們的父容器了。


三、列表的響應式

在手機站雙排列表,有的時候會出現列表文字重疊或者換行錯位的問題。這是因為用戶的屏幕太小導致的。要解決這個問題,用可以下面的這段css代碼

li{

 float:left;

 diaplay:inline-block;

 overflow:hidden;

 text-overflow:ellipsis;

 whtie-space:nowrap;

 width:49%;

}

這段代碼的意思是,如果屏幕太小,列表溢出的文字會自動截斷並顯示省略標記“……”


一般我們最好了界面、圖片和列表的響應式設置之後,整個網站就能適合絕大數的移動設備訪問了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved