标签：性问题 ejs 选型 工具 逻辑 图片 浏览器 项目 包括
现在的前端工作中，移动端的地位甚至已经超过了PC端，也趁着有时间，来全面总结一下移动端页面重构的注意事项和一些小技巧。
话不多说，首先项目开始前，首先要进行整体规划和准备工作。
一.整体规划与准备
1.项目构建目录
前端项目如火如荼的发展着，项目开发之处的准备工作也越来越复杂，IT项目的发展都是为了更高效的开发，也就是易用性、高扩展性、高维护性三个方面。构建目录时应就具体情况进行分析，不外乎以下几点：
（1）生产环境与发布环境目录（是否使用打包工具、编译器等，例如webpack、less、sass、postCSS、babel，项目测试无误后输出发布发布环境。）
（2）构建工具目录（gulp、grunt、webpack）
（3）模块加载器目录（require、sea、webpack）
（4）测试环境目录
（5）真机调试（在此注意，浏览器端预览是基于像素比和视口，对移动端设备大小进行的模拟，无法完全模拟移动端设备。）
若不使用额外工具，此项可以忽略。之前常用gulp的browser-sync，会在gulp的构建目录中存在。
（6）主文件目录（大学时刚接触前端可能就这一个目录，在此用于自嘲 ^_^）
包括css目录、js目录、图片、字体等。小项目中，第（3）条的加载器也可包含在此，此目录具有灵活性。
（7）模板与路由等逻辑层目录等（注意：此处针对于使用node.js为后端语言的前端开发者，若后端语言为php、java等可不作考虑）
node.js是趋势，模板目录以express+ejs为例（鄙人只用过express），一般将ejs文件放于一个目录之下，而路由文件放于route目录之下，主文件（app.js）经路由分发后再route下拿到具体的逻辑文件进行执行，然后返回给浏览器端进行渲染（大多后端语言的模板都是如此）
2.选择合适的技术栈
在此不作过多解释，基于尽可能高的开发与执行效率，根据公司要求或个人喜好进行选择。
3.页面单位选型与布局
单位的选型直接关系到页面呈现的效果，根据我的经验有以下几种选择：
（1）简单粗暴的完全使用媒体查询
简单粗暴但确实是想要什么效果就有什么效果，只要你不嫌麻烦。在追求高效开发的前端行业，这项选择可以抹去。
（2）纯纯的使用em
个人更喜欢在响应式的时候使用em在根节点用于区分PC端和移动端的基础字体大小。不过，在纯移动端也不乏为一种不错的解决方案。但是，因为em在计算字体大小时是相对于父节点的字体大小计算的，所以要处理好父节点的fontsize大小就显得尤为重要，而一旦处理不好就会有牵一发而动全身的赶脚。纯纯的使用em，个人不是很建议，因为一个节点使用em不但取决于父节点，更影响着子节点。独立操作的空间稍显不足。
（3）纯纯的使用rem
但从想法上看，完全的流体布局，是最佳解决方案，但存在兼容性问题，如Chrome的最小字体为12px，但其他多数浏览器最小字体可在12像素下。真机调试时你就会发现，12像素是正常用户可容忍的最小字体，但使用rem稍有不慎就会使字体小于12像素，因此，此选择要求开发者时刻谨记最小字体的临界大小。
（4）VW、VH（这里的V指viewport）
VW：视口宽度的百分比。如1VW为视口宽度的1%，VH同理；vmin视口宽度和视口高度中得最小值，vmax同理；
使用视口单位是真正意义上实现流体布局的选择，因为它除了基于视口大小外不受任何其他因素影响。个人很看好视口单位的后续发展，毕竟是直截了当的根据响应式设计的。但由于种种原因，目前使用还不是很广泛，但在局部布局或解决具体问题时时往往会起到点睛的效果。
（5）em+媒体查询
建议使用，常规单位操作使用em，具体操作使用媒体查询。
（6）rem+媒体查询
建议使用，常规流体布局操作使用rem，具体操作（如最大最小字体等）使用媒体查询。
搭配使用是最佳选择，特殊项目还需要具体分析，以上分析与建议建立在常规的纯移动端项目中。
标签：性问题 ejs 选型 工具 逻辑 图片 浏览器 项目 包括
原文地址：http://www.cnblogs.com/pomelott/p/7750748.html
