白羊：我觉得我们录完没说到一起去啊。
Astrian：怎么讲？我觉得还成？
白羊：我一直在说元素排版的问题，你一直在说分辨率的事儿。
Astrian：🙄🙄🙄

久等了！因为这期的剪辑出了一点小问题，因此让大家等待的时间有点长，非常抱歉。

Echo.js（真正的）第一期节目，两位点了不少前端技能点的主播，简单谈了谈有关前端开发（网页开发）的历史，吐槽有关 HTML 历史遗留问题带来的各种奇形怪状的问题，其中就包括多屏幕适配、长期以来的排版样式问题，以及目前前端开发技术栈被替代的可能性。

➤ 节目索引

• 00:00:00 开场



• 00:01:17 为什么要吐槽前端开发？



• 00:04:00 响应式前端开发的由来



• 00:10:17 HTML 的「流式布局」



• 00:15:34 正常流程下做响应式网页的方法



• 00:19:41 让人又爱又恨的栅格系统



• 00:26:21 向 flex 开炮



• 00:33:38 Flex 是一个比栅格系统更灵活的排版系统



• 00:36:50 在网页做排版是一件「逆天而行」的事情



• 00:38:13 另类适配方案



• 00:55:43 马后槽：虽然会造成各种各样的问题，但意外很好用的…… 表格排版法



• 00:56:43 尾声

➤ STAFF

主播：Astrian、白羊
剪辑：白羊
特别感谢：Christopher

➤ 补遗

Christopher 在事后提醒我们，显像管显示器显示比例通常是 4:3 的重要原因是，更接近正方形的显像管显示器更容易以低成本方式生产。

➤ 相关链接

• 知乎上有关显像管显示器比例的讨论：为什么早期屏幕是 4:3 比例？



• 有关 WAP 的维基百科资料：无线应用协议



• 节目中提到的几个前端视觉框架：Bootstrap、iView 和 Element



• 拯救前端开发者们的 flex 样式特性的 官方文档



• 通过绘制的草图生成 HTML 的工具：Sketch2Code。我们当时看的好像不是微软做的，不过原理似乎差不太多。



• 在没有 Flex 的时候，设前后左右都是 50% 的居中方式：HTML+CSS，让 div 在屏幕中居中（水平居中 + 垂直居中）方法总结

➤ 关于 Echo.js & 联系我们

Echo.js 是一档关于编程与开发的播客节目。官网地址是 podcast.astrianzheng.com。我们推荐使用支持 RSS 方式订阅（即「泛用型」）的播客客户端收听。

有话想说？可以来小宇宙 app 订阅 Echo.js 并给节目发评论，也可以发邮件至 podcast(a)astrianzheng.com。

关注我们的：Telegram 频道、Twitter

➤ COPYRIGHT DISCLIMER

开场音乐：Track: TOKYO MACHINE & Guy Arthur - GET UP [NCS Release]. Music provided by NoCopyrightSounds. Watch: https://youtu.be/HV7mLcsUp5U, Free Download / Stream: http://ncs.io/GetUp