零基礎創作專業wordpress網站07-製作主頁（適配手機端）

上節課，我們完成了桌面主頁頁面的構建，這裡儲存所有的更改，然後來到網站的前臺，重新整理這個頁面,

我們發現當寬度縮小到手機寬度時，視訊並沒有載入，因為這是在手機的模式下，在非常小的螢幕下，視訊是沒有正常工作的。它和桌面的情況用的不是同一種技術，所以在手機狀態下，這個效果是沒有的。

為了解決這個問題，我們需要做一個備用的圖片，即使在載入不出Youtube視訊的情況下，也能從我們自己的伺服器中載入一張正常的圖片：

再來到網站的前臺，試一試手機的大小：（圖片正常載入哦），這就相當於任何情況下，保證圖片的載入沒問題。

看起來不錯。

但是選單和文字的間距過小：

所以，來修改手機上的顯示效果：

確保選中的是手機，解除內距一致的限制，修改頂部距離為100：

這樣，這個修改就只會在手機的螢幕中顯現出來。

更新，並來到網站的前臺，切換到手機的寬度，這時的效果還是不錯的。

但是這個按鈕還是有些不好看：

我們把它變為一行：

來到網站的前臺，看看手機的效果，現在我們的網站就是完全的手機友好的。

整體概覽一下，整個網站看起來非常漂亮乾淨，不管是桌面黑市手機都可以完美的顯示，這樣，我們的主頁就新增好了/