一週前，代碼盒子 https://daima.co 發佈了beta版。根據早期用戶的反饋，以及我們自己的開發計劃，今天正式發佈Beta 2.0。
( 原Beta發佈消息見頭條文章 Hello, World! 你好，世界 )
Beta 2.0是對Beta 1.0的一個重大升級，特別是對編輯器進行了大幅優化：
- 將HTML、CSS和JS源代碼編輯器三個欄目並列，合併為tab的形式，和VS Code的模式一致。
- 預覽和代碼編輯器的佈局支持橫向並列、縱向上下排列以及預覽全屏模式。
- 技術含量最大、也是最酷的是增加了模擬不同屏幕大小的響應式預覽輸出。
- 對UI風格進行了簡化，更加現代化。
升級後的代碼盒子，將真正成為前端開發、實驗和交流的利器。
本篇演示代碼見37號盒子，https://daima.co/37
代碼編輯器轉為VS Code風格
原編輯器的風格是HTML、CSS和JS三欄並列，用戶反饋不符合多數編輯器的習慣。對此我們進行了調整，改為Tab模式。
HTML編輯
CSS編輯
多種編輯器、預覽佈局
用戶的屏幕尺寸各不相同，新的版本支持橫向、縱向、預覽全屏顯示、以及隱藏導航樹的模式。
橫向
縱向
全屏預覽
隱藏導航樹
模擬不同屏幕大小的響應式預覽輸出
為了方便測試響應式設計的頁面在不同尺寸屏幕上的效果，我們最新的版本能夠模擬不同屏幕尺寸的大小，生成頁面預覽，支持通過拖拽的方式調節屏幕尺寸大小。
我們看一段視頻吧。
播放
暫停
進入全屏
退出全屏
00:00
00:00
重播請
刷新
試試很酷，是不是？
更簡化、更現代化的UI
我們對原UI進行了精簡，特別是頂部工具欄、Tag標籤、導航樹等，整體風格更見現代化。
更簡化、現代化的UI
以上示範代碼的代碼盒子為 37號， 訪問 https://daima.co/37
代碼盒子，前端開發研習社、 實驗室和遊樂場
https://daima.co
記得點個贊、關注下哦。
分享到:
