RWD 回應式設計實務技巧 - Front End 網頁前端工程教學

[@RikoRey-f6g]

非常棒的教学影片，受益良多，非常感谢彭彭老师

[@AK-di6xs]

超級感謝彭彭老師!!!!!!! html RWD 響應式網頁切版 這是一個回應式設計網頁的範例 選項一、選項二、選項三 Product 1 Product 2 Product 3 Product 4 css /* 目標讓他可以在各種不同螢幕都能正常顯示 */ /* 電腦版的設計 */ .headline{ font-size: 30px;font-weight: bold; margin-bottom: 15px;text-align: center; } .desktop-menu{ text-align: center; display: block; } .mobile-menu{ display: none; text-align: center } .list{ display: flex; justify-content: center; } .product{ flex:none;width: 280px; margin: 10px; background-color: pink; text-align: center; } /* 平板裝置的設計 */ @media(max-width:1250px){ /* 螢幕寬度小於1250px 套用這個區塊的CSS */ .list{ flex-wrap: wrap; /* 要有這個才會往下掉 */ } .product{ width: 45%; } } /* 手機板的設計 */ @media(max-width:500px){ /* 螢幕寬度小於 500px 套用這個區塊的CSS */ /* 手機尺寸最小是360 再往下的設備我們就不在乎了 */ .headline{ font-size: 20px; } .desktop-menu{ display: none; } .mobile-menu{ display: block; } .product{ width: 90%; } }

[@cwpeng-course]

加油加油！

[@r124io2]

簡單易懂! 期待之後的JavaScript的教學

[@cwpeng-course]

謝謝回饋，會再找時間多出一點 JavaScript 教學 :)

[@williamwei-binlee5375]

彭彭老師真的是很替學生著想的老師!!!

[@cwpeng-course]

大家一起往前走很棒呀 :))))

[@shing-b9o]

同意

[@eric200944]

目前自學前端的ＨＴＭＬ，ＣＳＳ，ＪＳ 謝謝老師的分享 簡單易懂

[@cwpeng-course]

不客氣，很高興對你有幫助 :)

[@taojungwang1596]

彭彭老師講解得非常清楚有條理，感恩~

[@cwpeng-course]

謝謝你的回饋哦 :)

[@kroger8507]

困難的思維瞬間變簡單，讚，謝謝澎澎老師

[@cwpeng-course]

讚讚，很高興對你有幫助 :)

[@hjwing237]

老師的教學真的很簡單易懂，不管有沒有學過都應該再看過一次，一定會有收穫的

[@cwpeng-course]

謝謝你的回饋和推薦，希望大家都有收穫 :)

[@BoyuanChao]

目前自學中小白 老師的影片真的概念很清楚 而且沒有多餘的部分 拳拳到肉 受益良多 真的感謝

[@cwpeng-course]

謝謝你的會饋，也很高興對你有幫助 :)

[@evazhao1890]

你讲的真的很好，我下周就是一个midstone的project，需要用到前端的一些知识，希望我可以在这周之内把前端的知识赶完

[@cwpeng-course]

希望你现在已经顺利赶完专案了 ~

[@雪子祖兒-y2k]

很喜歡老師的教學-- 容易懂不用太傷腦... 謝謝老師

[@cwpeng-course]

不用太傷腦很讚，謝謝你的回饋呦 :)

[@jim20926]

講得非常清楚，超棒！

[@cwpeng-course]

謝謝！

[@williamwei-binlee5375]

雖然已經寫好, 但是又能加深印象程式結構中的重點.

[@cwpeng-course]

讚讚，繼續加油嘍！

[@熊頭小迷妹]

請問他自動幫你把某些部分打出來的功能可以關掉嗎 像是打會自動變 或是=會自動跳出=" " 常常需要方向鍵在那邊切 或是打="就會因為上面那樣跳到" "外面

[@劉姸孜]

謝謝老師製作這麼優質且容易入門的教學影片！ 想請教設定flex-wrap後，我試著把product設定為width: 48%，結果在1015px時，項目就變成一個一個垂直排列，是因為我電腦營幕太小嗎？（我是macbook pro 13")

[@cwpeng-course]

除了寬度還要多考慮 margin 和 padding 佔據的空間，全部加起來若超過一半，就會掉下去 ~

[@劉姸孜]

@@cwpeng-course 了解，謝謝老師！

[@MrSu81228]

彭彭老師您好，請問平板的版本需要在.list用{flex-wrap:wrap;}為何在手機版的時候就不用使用也能向下排列了？

[@cwpeng-course]

他還是有使用到哦，我們的設定是指在某個寬度以下就會套用，所以就算在更低的寬度，上面已經套用的設定還是會繼續有效。

[@Jason-ki8gr]

老師我想問，所有寬度都是用1200像素去換算嗎？ 還是有例外呢？ 謝謝老師

[@cwpeng-course]

1200 只是一個常見的斷點，因為大約是現代桌電、筆電螢幕的最小寬度，不是硬性的規定。

[@zszz0079159x]

老師為何不使用rem跟vw?vw就不會在小螢幕被過度壓縮不是嗎？老師若有看到煩請解惑，感恩，因為當初被教的都是rem跟vw,vh等單位

[@cwpeng-course]

選擇相對單位或者絕對單位都是可以考慮的，實際上要看看每個具體的情境，如果試著開發多一點各種網頁版面，就會發現都有機會用得上。所以你學的沒什麼不好，我們這裡教的也是我認為好的，各有適用情境。

[@yhk5786]

彭彭老師您好，想請教您： 在＂桌機的原始設定＂中，寫.desktop-menu的時候，沒有寫 `display: block;` 好像不影響執行，一般會建議要寫嗎？ 另外，影片 08:32 media 前面好像少了一個@ 的樣子... 謝謝彭彭老師

[@cwpeng-course]

不客氣哦，div 標籤預設的 display 就是 block，所以確實可以不寫。寫上去只是清楚的說出差別，有教學的用意。 少一個 @ 沒錯 XDDD

[@tomcui5891]

彭彭，有没有hcj前端工程相关书籍推荐的

[@cwpeng-course]

没办法推荐书籍，我很多年没看书学程式了

[@姚字丞]

[@cwpeng-course]

:)

[@huilantsao8942]

謝謝彭彭老師這太實用了! 不過想請問為什麼平板時width要設45% 而不是50%之類的呢? 45的用意不太懂想請教一下,謝謝!

[@cwpeng-course]

謝謝你的回饋 :) 我只是不打算讓他塞這麼滿而已，很單純的意思，只有兩個加起來接近 100%，而且塞不下第三個的空間即可。

[@andyyyy4102]

22:47/選單27:27

[@cwpeng-course]

感謝紀錄

[@愛上畫裡的世界]

老師想問下用Mac寫得話網頁會不會跑不出來

[@cwpeng-course]

不會哦，網頁的運作和作業系統基本沒有關係 ~

[@tobyl8754]

老師請問~ 不把flex:none寫出來 會有產生什麼影響嗎?

[@cwpeng-course]

flex:none 表示按照我們指定的寬度顯示，不寫的話在某些情境的時候會自動縮小寬度。

[@tobyl8754]

@@cwpeng-course 老師~如果刪去flex:none 但有寫出指定的px 遇到某些情況也會縮小嗎

[@cwpeng-course]

@@tobyl8754 按照文件的說明來看是的，我自己本身很少這樣做。

[@CK-bu5wh]

你好彭彭，請問如果我以mobile first 的設計出發，第一個給ipad使用者 media query 寫@media screen and (min-width 768px) 第2個給電腦使用者 寫@media screen and (min-width 1250px) 這樣子的設計在市場上普遍嗎？

[@cwpeng-course]

我無法回答你是否普遍，因為我沒有真的去統計過，但 Mobile-First 的思維和設計確實是有些人偏好的做法，我認為只要能確實解決版面的問題，那都是可以接受的 ~

[@CK-bu5wh]

@@cwpeng-course 謝謝彭彭 因為我有聽說用mobile first 的設計 在用手機載入網頁的時候後 效能會好一點點因爲不會去跑desktop 的code 但不知道實際上的起的作用是不是真的很明顯～😂 Ps. 彭彭新年快樂 明年請再多多指教🙈

[@jingwangnet]

mobile first is right

[@halrison]

CSS有辦法偵測使用者的裝置來套用設定，而不是單純看瀏覽器 (螢幕) 寬度嗎

[@cwpeng-course]

可以在 Media Query 的條件中使用 max-device-width 取代 max-width，就是看裝置的螢幕寬度，不是視窗的。

[@簡宏倫-z4g]

想請問一下為何在18:10秒時在media中的product中不用打flex:none呢?

[@PeiLinGuo-o5x]

因為上面已經有寫了(電腦尺寸那邊的.product)，老師在20:16那邊有說到：上面有寫到的會再沿用

[@cwpeng-course]

感謝 @郭佩琳 的說明 :)

[@簡宏倫-z4g]

@@PeiLinGuo-o5x 歐歐~了解!感謝!

[@彭彭-p7r]

推

[@cwpeng-course]

謝謝 :)