liang14658fox1. 响应式布局
开发一套界面，根据页面宽度自适应网页内容。
优点
- 灵活性强，能够快捷解决多设备显示适用问题
- 适合有移动端适配需求的新项目
- 适合简单的页面，比如博客、静态展示页面
缺点
- 第一次开发工作量大，每个页面的页面元素都要设计为响应式
- 单个页面代码体积大，加载时间可能会加长
- 在一定程度上改变了网站原有的布局结构
2. 移动端页面单独开发
需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是 PC 端、平板还是手机，从而请求服务层，返回不同的页面。
优点
- 升级网站（二次开发）工作量小，适合仅有pc端的旧网站升级。
- 单个页面的代码体积小，加载时间快
- 对网站复杂程度兼容更大
- 测试和运营都相对容易和精准
缺点
- 一次性开发两份页面，总工作量大，不适合新项目
- 全部页面的代码体积加起来大
对比
| / | 响应式 | 单独开发移动端 |
|---|---|---|
| 单个页面体积 | 大（1.5） | 小（1） |
| 总代码体积 | 小（1.5） | 大（2）（pc页面和移动页面两份代码） |
| 页面加载时间 | 慢（1.5） | 快（1）（仅需加载pc页面或者移动页面） |
| 单个页面工作量 | 大（1.5） | 小（1）（升级仅有pc端的老项目仅需再单独写一份移动端） |
| 总工作量 | 小（1.5） | 大（2） |
| 升级原有项目工作量 | 大（1.5+1.5）（需重新设计，弃用老项目） | 小（1）（升级仅有pc端的老项目仅需再单独写一份移动端） |
| 适合项目类型 | 简单（博客、静态） | 复杂（复杂业务还是不推荐移动端） |
| 适合什么需求 | 新项目 | 仅有PC端端老项目升级 |
1. 响应式页面开发方案
- 通过媒体查询，加载不同css文件
- 使用flex布局
- rem适配方案
2. 单独开发移动端页面方案
- 通过媒体查询，加载不同页面