可以参考下我的作品，在老师的基础上我做了优化：

1、音乐停止与播放时图标指针变化

 2、第二页倒计时显示

 3、展示到第三页的时候绑定上拉下滑翻页。

github：https://github.com/ar414-com/html5cards 

效果链接：https://ar414-com.github.io/html5cards/(觉得有帮助可以start一下呗)

这个了解就好

top用的是%为单位，有时候会被手机的自带工具顶下来，有时候不会，，可以试试用vw做单位。

ipad是PC网页，和PC端是一个适配，不属于手机网页，所以不一样。
PC和ipad要单独做样式

css在改改呗

font-size: 1.5625vw；all tag样式里这个在最开始的时候没看到，设置成了vm，导致字体变的很大，改成vw就好了。不知道你的是不是

这要看屏幕尺寸

vw

屏幕宽度相关，1vw是屏幕宽度的1%

vh

屏幕高度相关，1vh是屏幕高度的1%

现在都替换px转而使用rem

http://bxw2359490012.my3w.com/

我的也是，加了meta就好了

<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

听楼主的意思是另外两个圆圈能显示，建议通过审查元素看一下不能显示的圈的width和height，是不是为0了，
然后比较它的代码与另外两个圈的代码的不同。
纯手打不容易，满意的话请采纳一下，谢谢！

最好在控制台也要写一下

看不懂你问的问题呢，能说的详细一点吗？

代码呢？

我说的1080是设计图就是640*1080，如果设计图是750 * 1600怎么做

嗯，，我写的也是这种情况，在手机端连羽化都没了

这个是让浏览器以你所装的浏览器中的最新内核来渲染，一般有都默认是最新的，所以就看不到什么效果。

编写代码前一定要设置好viewport,老师把这一讲放到了最后，我个人觉得这个不是很合适，因为这个可以影响到代码的具体展现，我们必须在viewport设置好的基础上还编写我们的效果，才是最终效果。否则当我们写好代码再来添加这个就会发现很多的代码是多余的，甚至有负作用的。有些本来是可以添加viewprot就好了的效果，因为我们开始没有加viewport，就会用代码去调很久，浪费时间不说，最后可能还发现，当我们加了viewport后，本来调好的代码又会乱掉。