iT邦幫忙

2019 iT 邦幫忙鐵人賽

0
自我挑戰組

程式設計師大冒險系列 第 51

[51/150]RWD大,網頁急需你的支援

為了方便使用者閱讀,RWD支援是必要的。

【大綱】

  • 時間分配
  • 作業
    • 支援RWD
    • CSS簡答
  • 檢討與修正
  • 總結

【時間分配】

發完文會補讀英文。

項目 時間
人生規劃 0 hr 24 min
支援RWD 3 hr 12 min
flex青蛙遊戲 0 hr 37 min
鐵人賽發文 0 hr 40 min

【作業】

作業二:版面是二欄式網頁,比作業一簡化更多,所以跳過。

支援RWD

參考:CSS3 Flexbox RWD 教學 By 彭彭
筆者建議:跳至02:21 調1.5X速

規劃:筆者網頁為三欄,故與影片規劃不同。

媒體 電腦 平板 手機
欄位 3 2 1
媒體規格 欄位設定
/>=1200 3欄,固定
1200>,>500 2欄,彈性
500>= 1欄,彈性

不熟的朋友可以玩看看flex青蛙遊戲第18關起

重玩以後對flex-direction屬性又更加了解
他會影響到justify-content,align-items.
這次破關從一小時進步到半小時。

.main{
display:flex;
flex-wrap:wrap;
}
@media(max-width:1200px){
	main>.item{
width:45%;(沒有50%是怕避免太擠)	
}
}

輸出結果:筆者網頁
可以手動拖視窗模擬手機或平板畫面

CSS簡答

作業六:

1.沒看過課程,跳過不答。

  1. 這題用畫圖回答
    https://ithelp.ithome.com.tw/upload/images/20181120/20091910H9lMOMrKci.jpg

語法
inlie 可以和人共享同行,卻不能決定位置大小(寬度)。
block 一人一行,要躺要坐要站都由他。
inline-block 有inlie共享同行,兼有block決定寬度大小。

參考學習CSS版面配置

語法
static 古板按照瀏覽器預設位置,沒有個人情緒。
relative 會插隊不會跟其他人協調位置
fixed 跟Excel固定欄位設定很像
absolute 繼承父親領地

【檢討與修正】

學習時段主要在下午到晚上,為了增加時數,之後規定13點前至少讀一小時。
這次做RWD才知道,排版沒有排好,有些設定還要再處理。
第四週難度提高很多,目前想加強Git和JavaScript基礎,再來進行課程。

【總結】

這個計畫前端三劍客個只有一週可以學,進度非常的趕。
前面吃老本勉強跟得上,現在開始有點吃力。
感謝撥冗閱讀。


上一篇
[50/150]第八週學習總結(Github網頁上架成功^-^)
下一篇
[52/150]iT邦里程碑-第一次獲得最佳解答
系列文
程式設計師大冒險76

尚未有邦友留言

立即登入留言