纳新宣传网页总结

这周写了一个关于协会纳新宣传的移动端页面，第二次接触移动端，比第一次做用起来稍微能得心应手。

页面采用全屏滚动式，使用了fullPage框架，还引用了针对移动端响应式的bootStrap框架，bootStrap框架已经是第二次使用，所以还是很顺利的，栅栏排版用的比较多一些。下面谈谈这次小项目的心得。

首先针对移动端，使用了h5和css3。主要用到css3中的媒体查询，第一次使用这个，开始不太熟悉，后来发现主要是针对不同平台屏幕大小做不同的样式处理，使用@media。这样，在不同的平台上就会有对应的不同样式了，比如在宽大于980px的屏上，几张图片是横着排列，文字在图片下面，小于480px上，图片竖着排，文字在图片的右边。很不错的一次体验。还涉及了一些简单的css动画，用animate来做的。

另外对于图片的响应式处理，我是这样做的。先给图片img元素设置一个父元素，为父元素按百分比设置好宽和高，为图片设置宽和高都是100%，这样在不同的页面会有对应的图片父元素显示，不管父元素怎么变，图片始终会填充整个父元素，这样就简单地实现了图片的响应式。这是我的处理方式。

fullPage的使用中，学习了网上的一些案例，回调函数比较实用一些，针对不同屏来设置不同的动画效果啊，样式。遇到一个问题就是，有的屏需要下面的幻灯片导航，有的屏不需要，开始没解决，后来在网上看了一些实用回调函数，自己要而应用回调函数，在滚屏时在回调函数中做了不同的行为，解决了自己的问题，很受用。