这次项目是做移动端的网页app,由于移动端网页内容比较少,所以做起来比PC端的快很多,当然,我们这次项目做的只是移动端的皮毛,真正的移动端响应式开发还要到后面学习更多的技术实现。这次,我们大规模用了雪碧图来保存图片,老师也给我们发了一个生成雪碧图的工具,非常给力。
雪碧图我觉得还是挺好的,用PS把图标切好后以统一规范命名保存(PS可以设置),再用工具生成雪碧图,复制雪碧图的css代码我们就可以直接调用了,非常方便,比一张一张图片调用效率多了,也避免了重复命名的麻烦。另外,在提高页面性能上雪碧图也有不错的作用,由于浏览器在加载图片的时候是一张一张以队列的形式下载的,所以一个网页如果图片数量太多会直接影响到打开的时间,雪碧图将多个图片合成为一张图片无疑可以很大程度地避免这种问题。雪碧图一般适用于小图标,我甚至大图也用雪碧图,不过要注意小图标的雪碧图和大图的雪碧图要分开,不要全部都往一张上放。很多同学说不会用,反正我是用得挺爽的,直接调用,方便快捷,同时我也期待后面学习更多的技术进一步提高开发效率。
PC端开发考虑兼容性比较多,而移动端就会考虑适配比较多了,因为各种手机的屏幕大小不一样,所以我们开发的网页就一定要顾虑到不同分辨率屏幕的不同策略,或者制定一种比较万能的显示策略。比如说一个导航四个按钮占据整一行,我们就应该将每一个按钮的宽度设置为25%,这样无论屏幕大小怎么变,都不会有太大变化,我们在开发的时候就要注意哪些地方是占据一整行的,哪些是居中的,一定要明确才开始做。