今天完成的事情

修改了任务7犯的错误

首页的三角图标离边界太近, 我用的是具体的像素数值, 经过知道修改为了百分比.

首页捉鬼猜词版的背景色不对, 修改为白色.

投票页面的音频应该设置为自动播放.

发言投票行, 当宽度大于768px的时候,应该占满屏幕宽度.

投票下面的四个图标应该距离均分.

结果也底部白色部分当屏幕宽度大于768px的时候应该占满屏幕宽度, 不留空隙.

实现三个页面的互相跳转.

遇到的问题

音频的自动播放, 我采用的方案是用 iframe

隐藏使用的是

iframe {

    display: none;

}

在pc端(chrome, firefox), 手机(chrome,自带浏览器)测试通过,可以自动播放.

audio标签的autoplay属性在chrome66版本以后无效, 就算设置了也无法自动播放.

解决方法除了使用iframe标签以外, 可以使用原生javascript或jQuery的事件监听来触发自动播放功能.

firefox浏览器最新版自动播放功能正常.

参考资料

移动端不支持audio自动播放解决方案

Chrome 66禁止声音自动播放之后

autoplay自动播放策略

大于768px宽度没有占满的问题

把<div class="container"></div>

修改为<div class="container-fluid"></div>

.container: 固定宽度

.container-fluid: 100%宽度

参考资料

bootstrap使用一套css适配多个终端原理分析

投票图标距离等距离平分问题

text-align: justify;

text-align-last: justify;

justify: 实现两端对齐文本的效果

text-align-last: 规定如何对齐文本的最后一行

注意: text-align-last属性只有在text-align属性设置为"justify"时才起作用

兼容性

参考资料

如何在css中实现li元素在父元素中平均分布效果