我們上一篇說到,響應式的網站更有利於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%;
}
這段代碼的意思是,如果屏幕太小,列表溢出的文字會自動截斷並顯示省略標記“……”
一般我們最好了界面、圖片和列表的響應式設置之後,整個網站就能適合絕大數的移動設備訪問了。