首页 > 创作专业网站 > 零基础创作专业wordpress网站07-制作主页(适配手机端)
2018
08-23

零基础创作专业wordpress网站07-制作主页(适配手机端)

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

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

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

wordpress背景图片备胎 - 零基础创作专业wordpress网站07-制作主页(适配手机端)

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

看起来不错。

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

wordpress菜单重叠 - 零基础创作专业wordpress网站07-制作主页(适配手机端)

所以,来修改手机上的显示效果:

wordpress在手机上的预览 - 零基础创作专业wordpress网站07-制作主页(适配手机端)

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

wordpress菜单重叠位置修改中 - 零基础创作专业wordpress网站07-制作主页(适配手机端)

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

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

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

wordpress手机按钮调整 - 零基础创作专业wordpress网站07-制作主页(适配手机端)

我们把它变为一行:

wordpress修改字母间距 - 零基础创作专业wordpress网站07-制作主页(适配手机端)

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

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

最后编辑:
作者:MrBang
WordPress迷

留下一个回复