所在位置：
首页 >
营销资讯 >
网站运营 > 微专业栏目上线，想学IT技术的同学，又了多一个选择！
微专业栏目上线，想学IT技术的同学，又了多一个选择！
时间：2023-05-21 03:10:02 | 来源：网站运营
时间：2023-05-21 03:10:02 来源：网站运营
微专业栏目上线，想学IT技术的同学，又了多一个选择！：最近， @酷coo豆 在本站沉寂了一个多月，是因为潜心开发#微专业#栏目去了，现目前已基本完毕。这个微专业栏目，主要收集了网易云课堂旗下的
热门IT职业课程，适合对互联网行业感兴趣的朋友参考学习。
1. 有了一个想法
在策划微专业这个栏目前，我希望它是响应式的，能够一套代码适应PC、iPad、iPhone多个终端，一是为了能够覆盖到更多的用户，二是为了后续的维护方便。如果单独为手机端，再去开发新的页面，工作量至少就多了一倍，所以响应式布局是最优的方案。
△视觉设计稿（全设备响应式）2. 去实现它
在有了这个想法后，内心还是有点小激的，毕竟这是我第一次做响应式布局的网页。之前的经验告诉我，纯PC端的布局问题不大，纯移动端用rem单位来做适配也没问题，但接下来要面临的挑战是：如何才能实现从PC到手机端的平滑过渡，而无需撰写两个HTML文档呢？
起初想套用Boostrap框架做出响应式，但花了一周时间去学习后，发现套用Boostrap的不可控因素太多，而且
重复撰写样式会比较臃肿，于是就没有完全套用这个框架，而是有从中借鉴了Boostrap的@media媒体查询，以及响应式排版的HTML结构，来开发微专业这个栏目。
通过这次实践，发现CSS3 中的@media真是个好东西，只要针对不同设备建立好临界点，然后针对不同设备逐一编写样式，就能实现从PC大屏到移动端小屏的平滑过渡了，完美的解决网页适配的各种困扰。
3. 多端效果展示
△PC端展示△PC、iPad、手机端终端效果（栏目首页）△移动手机端效果△PC、iPad、手机端终端效果（详情页首页）4. 总结
在这个栏目开发过程中，遇到的问题自然是一个又一个，技术文档查了一篇又一篇，虽然有点小累，但看到自己的想法，在一步步的蠕动中逐渐实现时，也会有一丝丝快感在鼓舞着自己，最终还是如期的完成了这个项目。
△实现过程△实现过程在这期间，痛苦与快乐共生，这便是最真实的成长！
5. 最后
再说一下，这个栏目在内容方面涵盖有：产品策划、视觉设计、技术开发、人工智能、数据分析、营销运营 6个等领域，欢迎小伙伴们前往体验！
—
体验地址：
http://www.xxriji.cn/wzy/
关于本专栏
平面设计学习日记，是一个高质量设计教程、书籍、经验分享学习平台。汇聚推荐国内优秀设计导师、及相关优质平面设计教程，让自学有路可循，成长更加高效。
我是
「平面设计学习日记网」站长 @酷coo豆，感谢你的关注与支持！
在线咨询
