Hi All,
由於算是半路出家寫網頁, 有些問題想請教:
已邀請的邦友 {{ invite_list.length }}/5
不要用固定尺寸容器，不要用px來定位或設定大小，不要用js去分辨螢幕大小或設備來決定顯示方式，不要用css的:hover來開啟選單(不支援觸控)，改用:focus，不要用table(破表元兇)，不要用iframe
(個人慘痛經驗談)
好累，你可以用bootstrap或其他框架來做多設備*WD，如果有可以直接套用的模板，那更好..
不好意思，但我覺得這個建議有點片面
1.畫面上每個元件都有不同的尺寸設定方式，px跟比例是相輔相成的，並不能絕對的不使用。
2.focus跟hover完全是兩個不一樣的東西，觸發的事件完全不一樣。
3.table還是有必要使用的時候，可以利用一些方式在手機板減少顯示欄位，讓table自適應整個畫面
以上也是個人淺見，給您參考，謝謝!
感謝兩位回覆, 目前網頁都有使用到px table之類的, 目前對於排版實在不太行, 會再斟酌看看
只用hover來觸動選單或某些展現的功能的話，會讓手機使用者無法操作
至於px的問題是我卡很久的問題，用螢幕像素點來定位，怎麼做都會跟自適應互相扞格，或許我沒做好，踩坑踩的很辛苦
至於table我已徹底棄用，目前都是以css的display:table-row,table-cell來處理，超過畫面右側的格子可折斷成滿板畫面，不致出現左右捲軸來破壞書面
一定有更好的處理方案，但....我真的是踩坑踩到怕，這裡也只是說說個人心得
另~ 不能用的還有: FLASH、網頁開啟時的背景音樂(新版手機OS瀏覽器都已將背景音樂和自動播放影片，禁用開啟時播放)，還有一些IE特產function也無法使用，如window.open帶回傳值等等..
我想這些都是前輩的經驗, 我會參考的~ 謝謝!!
基本上，如果真的要做rwd。說真的，px真的盡量不要用。能完全不用是最好調整的。
一般會用到的話，大多還是需要跑js相對應用會比較好點。
或是應用在min或max上。
2.j大並沒有說錯。不要用 hover 。該事件在觸控式的設備不會被觸發。雖然一般來說我不會用這個事件在rwd上就是了。
至於用focus就見仁見智了。
3.想要真正的rwd模式，說真的千萬不要認為用table排版會比較容易方便。這點j大並沒說錯。它真的是破表原兇。我想你可能還沒遇過。
我跟j大一樣，也是被破的無可奈何。
以上是多年來的經驗，給你參考。感謝!!
了解，謝謝各位的指教:)
不過這邊我也可以推薦原PO直接去看Bootstrap官方文件中尺寸是如何設定的，會發現他們用了grid、px、%、em等方式去做到RWD，也可以直接學到更多關於排版的技巧哦!
目前網頁都是以PC為目標來開發排版, 如果想要以手機畫面來瀏覽的話, 是按下F12後的Toggle Device Roolbar來切換嗎?
基本的查看是這樣沒錯。但最好做好後。還是實際在手機看一下。
開發期間可以用這樣來查看。
假設問題1是對的, 那排版看起來挺糟的, 這部份該如何改善?
學吧!!!!
目前開發大量使用Bootstrap與w3schools的樣式排版, 這部分是OK的嗎?
Bootstrap針對rwd還是不錯。w3schools啥鬼??
程式開發使用Node.js, 大量使用jQuery, AngularJS, 這些在Mobile上都是相容的嗎?
前端語言與排版並無直接關係。但也不能這樣說就是了。
畢竟有些語法的確有手機不相容。(認真來說，不是手機的問題，而是瀏覽器的問題)
所以這個問題不能給你確定答案。只能說可以用。
是否有相關資源可學習? (網站 or 工具書)
找了。工具書有針對rwd相關的說明。或是參考雷神大給你的連結。
這類的教學是非常多的。但重點是你要能了解才行。
對有空間概念的人，學這種東西很快。
像我就不行了。每次都搞個四不像。
Hi 謝謝回覆
關於w3schools, 由於是寫網頁新手, 很多排版都是找網路來拼拼湊湊, 例如這邊就有提供簡單的layout, 所以要引用他的css, 這方面敘述不清 sorry
好，我錯了。原來是再說css。
我還以為是啥框架式的東西。
不過一般來說，我會建議用一個系列就好。
混著用出問題你會很崩潰。
(曾經混用崩潰過的人，最後打掉全部重排)
Bootstrap除了本身css的應用之外，其實它也有對應的js框架處理的。
你可以發現Bootstrap會需要再載入一支js
雖然不載入也能用它的css，只是可能有一些東西就會沒作用了。
OK 謝謝建議~
重點都讓大佬們講得差不多了，我在這補充一些個人自學的心得給您參考:
初學者最容易犯的毛病就是未學走先學飛(我們不是東尼史塔克也沒有AI管家賈維斯)，請先利用網路資源或書籍多多充實相關基礎，網路的可以先從Google搜尋關鍵字開始，書籍方面我推薦O'REILLY這家的書(他家的HTML5、CSS相關書籍我都有買過，算有一定的品質也不難閱讀，預算不多的話可試試Google書名+pdf有時會有驚喜)，基礎打穩一點你在用各種框架時可以少走很多彎路，有很多時候也是用基礎來破解一些框架本身辦不到的事情，我用CSS基礎舉個簡單的例子，CSS選擇器有所謂的優先順序，例如:
你在 Bootstrap 或 W3 這些 CSS 框架裡面很少會看到它教你用 style="...;...;" 這種寫法，因為一旦在html標籤裡用了這個，它的優先權最高，會導致框架設計的一些東西都套不上去(只剩Javascript能有辦法改動 style='...")，但是 style="..." 又是 HTML+CSS 初學者很容易使用的語法，比如你要把一個按鍵加紅框只要
<button style="border:solid 1px #f00;">Hello</button>
不是說絕對不能用style="..." 但是你要知道用了它會發生什麼事，
這就是為何要打好基礎的關係，而且這條路可能沒有盡頭。
(我剛開始自學的時候瀏覽器支援CSS2，CSS3還在草案階段，現在主流瀏覽器都支援CSS3了)
最後簡單展示一個用 Bootstrap5 做的 RWD 圖片效果，在大中小不同的寬度下會有不同的呈現結果 (源碼是 bs5網站 的 start code改的):
<!doctype html>
<html lang="zh-tw">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>BOOTSTRAP5 TEST</title>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body class="bg-white">
<div class="container-fluid p-5 text-center">
<a href="#" title="test">
<span class="d-md-block d-lg-inline-block m-1">
<img src="https://ithelp.ithome.com.tw/storage/image/logo.svg">
</span>
<span class="d-none d-sm-block d-md-inline-block d-lg-inline-block m-0 m-sm-2">
<img src="https://ithelp.ithome.com.tw/static/2020-12th-ironman/images/banner_signup_ended.gif?v=20200902">
</span>
</a>
</div>
</body>
</html>
你可以試試看把上面的範例存成一個htm然後用手機、電腦、或在chrome用開發者模式切換不同設備看看效果。
iThome鐵人賽
看影片追技術