微专业栏目上线，想学IT技术的同学，又了多一个选择！

微专业栏目上线，想学IT技术的同学，又了多一个选择！

1. 有了一个想法

在策划微专业这个栏目前，我希望它是响应式的，能够一套代码适应PC、iPad、iPhone多个终端，一是为了能够覆盖到更多的用户，二是为了后续的维护方便。如果单独为手机端，再去开发新的页面，工作量至少就多了一倍，所以响应式布局是最优的方案。

微专业栏目上线，想学IT技术的同学，又了多一个选择！

视觉设计稿（全设备响应式）

2. 去实现它

在有了这个想法后，内心还是有点小激的，毕竟这是我第一次做响应式布局的网页。之前的经验告诉我，纯PC端的布局问题不大，纯移动端用rem单位来做适配也没问题，但接下来要面临的挑战是：如何才能实现从PC到手机端的平滑过渡，而无需撰写两个HTML文档呢？

起初想套用Boostrap框架做出响应式，但花了一周时间去学习后，发现套用Boostrap的不可控因素太多，而且重复撰写样式会比较臃肿，于是就没有完全套用这个框架，而是有从中借鉴了Boostrap的@media媒体查询，以及响应式排版的HTML结构，来开发微专业这个栏目。

通过这次实践，发现CSS3 中的@media真是个好东西，只要针对不同设备建立好临界点，然后针对不同设备逐一编写样式，就能实现从PC大屏到移动端小屏的平滑过渡了，完美的解决网页适配的各种困扰。

3. 多端效果展示

微专业栏目上线，想学IT技术的同学，又了多一个选择！

PC端展示

微专业栏目上线，想学IT技术的同学，又了多一个选择！

PC、iPad、手机端终端效果（栏目首页）

微专业栏目上线，想学IT技术的同学，又了多一个选择！

移动手机端效果

微专业栏目上线，想学IT技术的同学，又了多一个选择！

PC、iPad、手机端终端效果（详情页首页）

4. 总结

在这个栏目开发过程中，遇到的问题自然是一个又一个，技术文档查了一篇又一篇，虽然有点小累，但看到自己的想法，在一步步的蠕动中逐渐实现时，也会有一丝丝快感在鼓舞着自己，最终还是如期的完成了这个项目。

微专业栏目上线，想学IT技术的同学，又了多一个选择！

实现过程

微专业栏目上线，想学IT技术的同学，又了多一个选择！

实现过程

在这期间，痛苦与快乐共生，这便是最真实的成长！

5. 最后

再说一下，这个栏目在内容方面涵盖有：产品策划、视觉设计、技术开发、人工智能、数据分析、营销运营 6个等领域，欢迎小伙伴们前往体验！