快速入门前端开发指北

快速入门前端开发指北

最近做了一个手机的产品站，纯前端的项目，对动效和设计的要求较高，本人也是初次涉足前端项目的完整开发，所以写个总结文章记录一下收获。
本文的内容包括如何在接手到项目的时候快速的了解学习项目需要的相关知识，理解整个开发流程，需要注意的关键点。
前端开发的知识点的特点是覆盖面广，但学习需要的成本普遍不高，上手难度较低。对于纯前端的项目，对于页面的视觉效果要求是很高的，所以关键知识的学习包括这么几块：

纯前端项目开发的主要流程

1. 确认需求
2. 设计师出设计稿，其中包括大量的动效，需要前端参与评估实现难度与工作量
3. 前端基于设计稿进行初步的页面开发。其中设计稿原始为 Sketch 文件，为了可以得到前端开发时候需要的尺寸标注等信息，可以将 sketch 文件导出到 zeplin 或者用 sketch mesure 导出为 html 页面来使用，辅助前端开发。
4. 设计师提供完成的多端适配稿，前端开发的时候需要根据适配稿完成最终的页面开发工作。

CSS 知识体系

在开发过程中，我首先较为全面的学习了 css 相关的知识点，但是实际上 css 的知识内容其实非常零碎，确实需要在实践中一点点摸索，去了解页面样式中的一些奇怪的特性，以及各浏览器对于 css3 特性的兼容性问题。一点点尝试，一点点理解 css 在样式中的作用。
开发时的抽象思维
抽象的核心就是复用与模块化。写前端页面其实是一项比较枯燥的活，但是页面结构还是有很多值得仔细斟酌的内容。拿到了移动端，ipad端，pc端等各端的页面，我们就应该立即开始干活吗？我觉得首先应该仔细理解一下设计稿中页面的设计逻辑，多端之间尽可能的话可以复用一套模板文件，然后针对不同端提供特定的 css 样式。清晰的模块化与复用可以大大提升后期维护的效率。
一些知识的记录

CSS 像素与度量单位

首先需要明确浏览器中的屏幕分辨率或者说在 css 中使用的 px 像素单位与设备的原始分辨率没有直接关系。px 像素是一个相对值，比如你在浏览器中将展示内容从 100% 放大到 200%，设备的物理像素没边，但是 1px 所代表的物理像素其实变多了，因此页面的元素才会变大。
通常，我们会基于媒体查询得到的浏览器宽度来区分不同设备。举个简单的例子，移动端，ipad，pc的分辨：
mobile = '(max-width 568px)'
ipad = '(min-width 569px) and (max-width 1024px)'
pc = '(min-width 1025px)'

px

是 CSS 中最常用的度量单位，基于浏览器的虚拟像素进行度量。

em

基于父元素的 font-size 作为锚点，进行动态的大小调节的，通过使用 em 和媒体查询，我们可以在多端的页面适配中使用同一套度量标准。但是 em 并不是万能的，首先不同端的设计稿某些元素间的间距可能是不一致的，其次 em 基于父元素的 font-size，这意味着直接包裹 text 的块如果使用 em 可能会有一些不一致的表现。

vw,vh

基于视窗的长宽来作为度量单位，view width 和 view height。这类单位在实现全屏等效果的时候比较常用。比如各类类似上下滑动翻页的应用，需要元素占据整个视窗。

可以参考这个总结(https://www.cnblogs.com/zaoa/p/8630393.html)

TODO