一、界面展示及简单介绍
先上完成后不同尺寸屏幕下的效果图,界面模仿的原版2048:
(768px<屏幕)
(500px<屏幕<768px)
(小于500px的超小屏幕)
原来预想左边是游戏列表,右边是排行榜,暂时没有做。
整体使用了bootstrap的栅格布局,左右两列在xs尺寸下隐藏,中间列独占12格。
在屏幕小于500px的时候额外设置样式:
@media screen and (max-width: 500px){
...
}
动画效果的实现学习了慕课网的2048课程,也算学习了一种新思路。
其它效果:
·手机端的滑动操作
·页面放大缩小格子跟随移