流式布局/响应式布局/rem适配布局————三种移动端常用布局展示

基于web移动端页面的练习项目

技术栈 Bootstrap + zepto + iScrol + swiper

京东页面:

• 准备-viewport-适配要求&详细参数
• 使用width100%流式布局编写
• 使用原生JavaScript编写轮播图（无缝滚动/无缝滑动/吸附效果）
• 使用原生JavaScript编写倒计时和顶部导航栏固定
• 使用iscroll实现区域滚动
• 移动端touch事件的使用,tap事件

微金所页面:

• 使用Bootstrap库编写响应布局
• 栅格系统使用
• Bootstrap样式重构
• Bootstrap组件使用
• Bootstrap-js插件使用
• 熟悉Bootstrap定制

苏宁购物首页:

• 使用Less编写css
• 使用rem适配移动不同尺寸屏幕（less优化换算）
• zepto编写轮播图和返回顶部动画
• 使用swiper实现轮播图