移动端点餐系统总结

用得到的知识点

响应式布局

懒加载（性能优化）

点亮星星评分

控制+-按钮的数量变化

跨域解决方案

——————————下面细说——————————————————————————————————————————————————————

 

响应式布局

 

响应式布局开发流程

第一步：确定需要兼容的设备类型、屏幕尺寸

第二步：制作线框原型

第三步：测试线框原型

第四步：视觉设计

在设计的时候需要保证内容文字的可读性、控件可点击区域的面积等

第五步：前端实现

响应式设计的页面由于页面布局、内容尺寸发生了变化，所以最终的产出更有可能与设计稿出入较大，需要前端开发人员和设计师多沟通。

响应式布局的实现原理

首先我们应该遵循移动端优先，交互和设计以移动端为主，pc则作为移动端的扩展，一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体）

1.响应式布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFr