DIV CSS 佈局教程網

“預計在未來一兩年內，移動終端上網用戶將超過PC互聯網。”這話不是我說的，而是出自新浪 CEO 曹國偉之口。當然，我也很認同他的觀點，在無聊的上下班路上、在領導開會高談闊論時、甚至是坐在馬桶上便便的時候，移動終端設備都已經成為了替換電腦隨時隨地可以連接上互聯網的最好工具。而如今最火最潮的移動終端設置無異於蘋果系列的 iPhone、iTouch 以及 iPad，也就是說，如果你的網站可以在以上這些移動終端設備上能夠提供更好的用戶體驗，也就有可能贏得更多的市場。

本文將以 iPhone 為例，介紹一下如何在眾多移動終端設備上個性化設置你的 WordPress 博客。有 iPhone 的童鞋不妨先用 iPhone 上的浏覽器 safari 來浏覽一下本站，看一下和電腦上的浏覽器看到的有何不同？

哈，沒錯，如圖所示，左右兩圖分別是本站首頁優化前和優化後的比較。在優化之前iPhone 上浏覽本站基本上和在電腦上看到的一樣，而在優化之後 iPhone 上浏覽本站則可以看到一個單欄的頁面。相對電腦顯示器來說，手機顯示屏很小，要在有限的顯示范圍內展現給用戶最重點最需要的內容才是王道，所以我把側邊欄、輪播圖、廣告、頂部工具條、評論部分等那些個花裡胡哨的東西給隱藏了，這是如何做到的呢？

其實很簡單，因為我們知道 iPhone 顯示屏的分辨率統一是 480px，那就只需要為這一寬度的設備單獨定義樣式就可以了，就和普通的 CSS 引入方法類似，方法有兩種：

1、為 iPhone 單獨引入一個新的 CSS 文件（我就是這麼干的）

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="<?php bloginfo('template_directory');?>/iphone.css" />

把這個放在 header.php 頭部的 style.css 引入文件之後就可以。

2、直接在 style.css 中修改，把對 iphone 下的樣式定義寫在 style.css 中的最後即可。

@media only screen and (max-device-width:480px) {

.forIphone{

/* style for iPhone */

}

}

@media only screen and (max-device-width:480px) 這種是 CSS3 的寫法，所以你妄想在 iPhone 下用其他什麼扣扣浏覽器、UCWEB 等貨去嘗試，此方法只對 safari 等標准浏覽器有效。

此方法只是一個拋磚，還有更多神奇的玩法等你去開發，比如說如何優化 WordPress 在 iPad 上的顯示？當然，這個方面不只是應用在 WordPress 上，所有支持 CSS3 浏覽器的用戶和網站都能實現這一功能，try try 吧~

轉載請注明來源：Life Studio