上节课，我们完成了桌面主页页面的构建，这里保存所有的更改，然后来到网站的前台，刷新这个页面,

我们发现当宽度缩小到手机宽度时，视频并没有加载，因为这是在手机的模式下，在非常小的屏幕下，视频是没有正常工作的。它和桌面的情况用的不是同一种技术，所以在手机状态下，这个效果是没有的。

为了解决这个问题，我们需要做一个备用的图片，即使在加载不出Youtube视频的情况下，也能从我们自己的服务器中加载一张正常的图片：

再来到网站的前台，试一试手机的大小：（图片正常加载哦），这就相当于任何情况下，保证图片的加载没问题。

看起来不错。

但是菜单和文字的间距过小：

所以，来修改手机上的显示效果：

确保选中的是手机，解除内距一致的限制，修改顶部距离为100：

这样，这个修改就只会在手机的屏幕中显现出来。

更新，并来到网站的前台，切换到手机的宽度，这时的效果还是不错的。

但是这个按钮还是有些不好看：

我们把它变为一行：

来到网站的前台，看看手机的效果，现在我们的网站就是完全的手机友好的。

整体概览一下，整个网站看起来非常漂亮干净，不管是桌面黑市手机都可以完美的显示，这样，我们的主页就添加好了/

转载请注明：虚坏叔叔 » 如何创建一个完美的网站07-制作主页（适配手机端）