图片发自简书 App
1. 有了一个想法
在策划微专业这个栏目前, 我希望它是响应式的, 能够一套代码适应 PC,iPad,iPhone 多个终端, 一是为了能够覆盖到更多的用户, 二是为了后续的维护方便. 如果单独为手机端, 再去开发新的页面, 工作量至少就多了一倍, 所以响应式布局是最优的方案.
图片发自简书 App
视觉设计稿 (全设备响应式)
2. 去实现它
在有了这个想法后, 内心还是有点小激的, 毕竟这是我第一次做响应式布局的网页. 之前的经验告诉我, 纯 PC 端的布局问题不大, 纯移动端用 rem 单位来做适配也没问题, 但接下来要面临的挑战是: 如何才能实现从 PC 到手机端的平滑过渡, 而无需撰写两个 html 文档呢?
起初想套用 Boostrap 框架做出响应式, 但花了一周时间去学习后, 发现套用 Boostrap 的不可控因素太多, 而且重复撰写样式会比较臃肿, 于是就没有完全套用这个框架, 而是有从中借鉴了 Boostrap 的 @media 媒体查询, 以及响应式排版的 HTML 结构, 来开发微专业这个栏目.
通过这次实践, 发现 CSS3 中的 @media 真是个好东西, 只要针对不同设备建立好临界点, 然后针对不同设备逐一编写样式, 就能实现从 PC 大屏到移动端小屏的平滑过渡了, 完美的解决网页适配的各种困扰.
3. 多端效果展示
图片发自简书 App
PC 端展示
图片发自简书 App
PC,iPad, 手机端终端效果 (栏目首页)
图片发自简书 App
移动手机端效果
图片发自简书 App
PC,iPad, 手机端终端效果 (详情页首页)
4. 总结
在这个栏目开发过程中, 遇到的问题自然是一个又一个, 技术文档查了一篇又一篇, 虽然有点小累, 但看到自己的想法, 在一步步的蠕动中逐渐实现时, 也会有一丝丝快感在鼓舞着自己, 最终还是如期的完成了这个项目.
图片发自简书 App
实现过程
图片发自简书 App
实现过程
在这期间, 痛苦与快乐共生, 这便是最真实的成长!
5. 最后
再说一下, 这个栏目在内容方面涵盖有: 产品策划, 视觉设计, 技术开发, 人工智能, 数据分析, 营销运营 6 个等领域, 欢迎小伙伴们前往体验!
来源: http://www.jianshu.com/p/19359d92bb9b