網頁前端工程入門：CSS3 Flexbox 回應式設計 RWD 排版教學 By 彭彭

[@MrDuofilm]

感謝彭彭老師~教得非常清楚~讚!!

[@cwpeng-course]

謝謝 :)

[@lovebuizel]

請問一下老師，為何用@media (max-width: 1200px) 而不是@media screen and (max-width: 1200px)呢? 少了screen有什麼影響呢?

[@cwpeng-course]

其實都可以，沒有太大影響。 screen 代表限定用戶的介面是螢幕 ( 幾乎都是 )， 沒有寫就代表無論用戶使用什麼介面都可用 ( 包括極少數印刷和語音介面 )。

[@lovebuizel]

瞭解，感謝。

[@rmt309]

严谨的操作应该是你的。

[@joelai1243]

感謝老師的教學~~

[@cwpeng-course]

不客氣 :)

[@黃小宏-u9s]

彭彭老師 您好： 用網頁從最大拉到最小可以看到 4*1 > 2*2 > 1*4 可是如果用F12的device去選擇width小的設備 最多都只有2*2 看不到 1*4 我程式碼和你的都相同

[@cwpeng-course]

可能還是要確認一下你的程式碼的狀況嘍 ~ 可能是上方 meta 標籤的影響 ~~~~~

[@bbaa8288]

你這行沒有打，因為我剛剛也是沒辦法

[@乾酪-k2x]

感謝老師！

[@cwpeng-course]

不會呦 :)

[@dingmao9577]

老師，上一部影片中。 如果Logo、menu、user排版設定都設定為flex:auto的話，會怎麼樣呢？ 實際應用會這樣做嗎？

[@cwpeng-course]

會很聰明的按照每個標籤的內容多寡和寬度，自動的調配空間哦。 我自己很少這樣做，因為這樣控制力很低，太多彈性我覺得實務上有點危險。

[@阿公-x2j]

flex-wrap:wrap的使用 是因為在main 的關係嗎? 又或是因為Flexbox關係呢?? 前面有一篇影片也是教RWD，但是沒有這個步驟

[@cwpeng-course]

RWD 有很多不同的作法，如果使用的是 inline-block 的做法，就不會和 Flexbox 有關，所以要分開來看。

[@阿公-x2j]

@@cwpeng-course 恩恩 謝謝老師

[@梁志豪-w3e]

老師您好~ 之前有看過您的【回應式排版設計】教學影片，裡面有提到須在中加入一段如下: 但在做這篇Flex和RWD練習時，發現沒有加上述那段，直接寫media queries一樣能呈現出RWD效果，想請教老師是否只要做RWD設計時都必須要放那段還是直接加media queries即可呢? 謝謝老師

[@cwpeng-course]

是的，都要加哦，它會影響實際手機上的表現，用電腦測試是看不出來的 ~

[@梁志豪-w3e]

@@cwpeng-course 了解，那我知道了，謝謝老師~

[@howhow5207]

老師您好~~我想請問一下 做電腦版網站時某些地方有HOVER 轉成手機網站時要怎麼把HOVER取消呢？

[@cwpeng-course]

不用特別取消哦，手機上 Hover 自然不會有什麼作用 ~

[@yu-chengchang8453]

老師您好，在< display >的模式選擇上，不使用< inline >或< inline-block >的原因，在於< flex >可以更彈性設計版面嗎?

[@yu-chengchang8453]

另外在做頁面轉換的時候，如果應用在智慧型手機部分，它應該在加入之前用的這行嗎

[@cwpeng-course]

使用 flex 確實更加彈性沒錯，在智慧型手機的部份，我們會在 中加入 也沒錯。

[@bucketnick]

厉害 这个博士可以

[@cwpeng-course]

XDDDDD

[@620026200]

您好想請問一下對於HTML及CSS您都是大略地解說了其中的一些功能而已 是因為HTML及CSS的重要性沒有javascript大 還是只是純粹地講解內容相比後者比較少而已

[@cwpeng-course]

以前端工程來說，畫面的處理大概佔三分之一重，JavaScript 佔三分之二。 確實我的這段教程更著重於 JavaScript 一些 ~

[@leonardlee6030]

老師請問一下在實務上Flex wrap 要寫在父元素比較好還是media query裡面比較好呢?

[@cwpeng-course]

要寫在父元素裡 ( 容器 )。 至於要不要特別在 media query 中設置，就看實際情況處理 ~

[@hellogodius]

老師您好，一樣的程式碼用網頁縮放的時候會變成1*4個，但是如果用f12的手機模式去試，最多只會從4*1變成2*2，請問是為什麼呢？

[@cwpeng-course]

不太確定你的程式的狀況，可能要仔細看看才能確定原因。

[@johnsonmao3271]

我也是同樣的問題@@網頁縮放很正常，但切換成手機閱覽就只能2*2無法1*4

[@普通男子]

請問一下老師，如果要用flex將項目置底需要怎麼處理?

[@cwpeng-course]

可以在容器上設定 align-items:flex-end 試試看

[@普通男子]

@@cwpeng-course 謝謝老師

[@user-zl4gs3vp5t]

good

[@cwpeng-course]

thanks. :)

[@嘟嘟-w6z]

老師請問 新的flex這功能 在實用中常用到嗎

[@cwpeng-course]

做網頁切版的話，確實是不錯的選擇 ~

[@winly546]

請問老師，我的視窗在縮小時會從原本的4欄變3欄變2欄，不是4>2>1，該怎麼調整呢? main{ display:flex; flex-wrap:wrap; justify-content:center; background-color:azure; } main>.item{ background-color:lightseagreen; flex:none; width:230px; margin:10px; } @media screen and(max-width:1200px){ main>.item{width:45%; } }

[@cwpeng-course]

這行字的 and 後面多加一個空白試試： @media screen and (max-width:1200px){ main>.item{width:45%;} }

[@winly546]

老師我可以了耶!我可以了!謝謝老師!!!

[@cwpeng-course]

哈哈哈 :)

[@老高-o6u]

還有50天就要上訓練營了 來這裡入門 做個紀錄xd

[@cwpeng-course]

哈哈哈，好哦，加油！

[@小田-q9b]

点波订阅

[@ednaho5536]

感謝老師! (○^V^○)

[@cwpeng-course]

:)))))

[@foodywendy6603]

請問老師:有時候DREAMWEAVER的提示字元會消失的原因是什麼呢? 比如我打CSS語法打上COLOR: 後面不會跳出顏色的設定 而是要完全自己打完XDDDDD 想說是不是按到什麼設定了O_Q謝謝老師

[@cwpeng-course]

我從來沒用過 Dreamweaver 說實在 @@a 所以關於軟體設定的細節我大概幫不上什麼忙 XDDDD

[@foodywendy6603]

好唷 謝謝老師^^