所在位置:
首页 >
营销资讯 >
网站运营 > 零基础创作专业wordpress网站07-制作主页(手机端)
零基础创作专业wordpress网站07-制作主页(手机端)
时间:2022-08-14 21:06:01 | 来源:网站运营
时间:2022-08-14 21:06:01 来源:网站运营
上节课,我们完成了桌面主页页面的构建,这里保存所有的更改,然后来到网站的前台,刷新这个页面,
我们发现当宽度缩小到手机宽度时,视频并没有加载,因为这是在手机的模式下,在非常小的屏幕下,视频是没有正常工作的。它和桌面的情况用的不是同一种技术,所以在手机状态下,这个效果是没有的。
为了解决这个问题,我们需要做一个备用的图片,即使在加载不出Youtube视频的情况下,也能从我们自己的服务器中加载一张正常的图片:
再来到网站的前台,试一试手机的大小:(图片正常加载哦),这就相当于任何情况下,保证图片的加载没问题。
看起来不错。
但是菜单和文字的间距过小:
所以,来修改手机上的显示效果:
确保选中的是手机,解除内距一致的限制,修改顶部距离为100:
这样,这个修改就只会在手机的屏幕中显现出来。
更新,并来到网站的前台,切换到手机的宽度,这时的效果还是不错的。
但是这个按钮还是有些不好看:
我们把它变为一行:
来到网站的前台,看看手机的效果,现在我们的网站就是完全的手机友好的。
整体概览一下,整个网站看起来非常漂亮干净,不管是桌面黑市手机都可以完美的显示,这样,我们的主页就添加好了/