微專業(yè)欄目上線，想學(xué)IT技術(shù)的同學(xué)，又了多一個選擇！

時間：2023-05-21 03:10:02 | 來源：網(wǎng)站運營

時間：2023-05-21 03:10:02 來源：網(wǎng)站運營

微專業(yè)欄目上線，想學(xué)IT技術(shù)的同學(xué)，又了多一個選擇?。鹤罱?， @酷coo豆 在本站沉寂了一個多月，是因為潛心開發(fā)#微專業(yè)#欄目去了，現(xiàn)目前已基本完畢。這個微專業(yè)欄目，主要收集了網(wǎng)易云課堂旗下的熱門IT職業(yè)課程，適合對互聯(lián)網(wǎng)行業(yè)感興趣的朋友參考學(xué)習(xí)。

1. 有了一個想法

在策劃微專業(yè)這個欄目前，我希望它是響應(yīng)式的，能夠一套代碼適應(yīng)PC、iPad、iPhone多個終端，一是為了能夠覆蓋到更多的用戶，二是為了后續(xù)的維護(hù)方便。如果單獨為手機(jī)端，再去開發(fā)新的頁面，工作量至少就多了一倍，所以響應(yīng)式布局是最優(yōu)的方案。

2. 去實現(xiàn)它

在有了這個想法后，內(nèi)心還是有點小激的，畢竟這是我第一次做響應(yīng)式布局的網(wǎng)頁。之前的經(jīng)驗告訴我，純PC端的布局問題不大，純移動端用rem單位來做適配也沒問題，但接下來要面臨的挑戰(zhàn)是：如何才能實現(xiàn)從PC到手機(jī)端的平滑過渡，而無需撰寫兩個HTML文檔呢？

起初想套用Boostrap框架做出響應(yīng)式，但花了一周時間去學(xué)習(xí)后，發(fā)現(xiàn)套用Boostrap的不可控因素太多，而且重復(fù)撰寫樣式會比較臃腫，于是就沒有完全套用這個框架，而是有從中借鑒了Boostrap的@media媒體查詢，以及響應(yīng)式排版的HTML結(jié)構(gòu)，來開發(fā)微專業(yè)這個欄目。

通過這次實踐，發(fā)現(xiàn)CSS3 中的@media真是個好東西，只要針對不同設(shè)備建立好臨界點，然后針對不同設(shè)備逐一編寫樣式，就能實現(xiàn)從PC大屏到移動端小屏的平滑過渡了，完美的解決網(wǎng)頁適配的各種困擾。

3. 多端效果展示

4. 總結(jié)

在這個欄目開發(fā)過程中，遇到的問題自然是一個又一個，技術(shù)文檔查了一篇又一篇，雖然有點小累，但看到自己的想法，在一步步的蠕動中逐漸實現(xiàn)時，也會有一絲絲快感在鼓舞著自己，最終還是如期的完成了這個項目。

在這期間，痛苦與快樂共生，這便是最真實的成長！

5. 最后

再說一下，這個欄目在內(nèi)容方面涵蓋有：產(chǎn)品策劃、視覺設(shè)計、技術(shù)開發(fā)、人工智能、數(shù)據(jù)分析、營銷運營 6個等領(lǐng)域，歡迎小伙伴們前往體驗！

—

體驗地址：http://www.xxriji.cn/wzy/

---

關(guān)于本專欄

平面設(shè)計學(xué)習(xí)日記，是一個高質(zhì)量設(shè)計教程、書籍、經(jīng)驗分享學(xué)習(xí)平臺。匯聚推薦國內(nèi)優(yōu)秀設(shè)計導(dǎo)師、及相關(guān)優(yōu)質(zhì)平面設(shè)計教程，讓自學(xué)有路可循，成長更加高效。

我是「平面設(shè)計學(xué)習(xí)日記網(wǎng)」站長 @酷coo豆，感謝你的關(guān)注與支持！