iT邦幫忙

0

跨平台網頁設計

Hi All,

由於算是半路出家寫網頁, 有些問題想請教:

  1. 目前網頁都是以PC為目標來開發排版, 如果想要以手機畫面來瀏覽的話, 是按下F12後的Toggle Device Toolbar來切換嗎?
  2. 假設問題1是對的, 那排版看起來挺糟的, 這部份該如何改善?
  3. 目前開發大量使用Bootstrap與w3schools的樣式排版, 這部分是OK的嗎?
  4. 程式開發使用Node.js, 大量使用jQuery, AngularJS, 這些在Mobile上都是相容的嗎?
  5. 是否有相關資源可學習? (網站 or 工具書)
froce iT邦大師 1 級 ‧ 2021-01-21 14:35:31 檢舉
AMOS開了youtube頻道,請好好利用。
https://www.youtube.com/channel/UCQfjTYYrqxPg5LJmDBUesbQ
5
raytracy
iT邦大神 1 級 ‧ 2021-01-21 11:37:42
最佳解答
阿薩姆 iT邦新手 5 級 ‧ 2021-01-21 14:12:57 檢舉

謝謝您~現在確實不知該如何找起

4
japhenchen
iT邦大師 1 級 ‧ 2021-01-21 12:14:30

不要用固定尺寸容器,不要用px來定位或設定大小,不要用js去分辨螢幕大小或設備來決定顯示方式,不要用css的:hover來開啟選單(不支援觸控),改用:focus,不要用table(破表元兇),不要用iframe
(個人慘痛經驗談)

好累,你可以用bootstrap或其他框架來做多設備*WD,如果有可以直接套用的模板,那更好..

看更多先前的回應...收起先前的回應...
tony iT邦新手 5 級 ‧ 2021-01-21 13:47:33 檢舉

不好意思,但我覺得這個建議有點片面
1.畫面上每個元件都有不同的尺寸設定方式,px跟比例是相輔相成的,並不能絕對的不使用。
2.focus跟hover完全是兩個不一樣的東西,觸發的事件完全不一樣。
3.table還是有必要使用的時候,可以利用一些方式在手機板減少顯示欄位,讓table自適應整個畫面

以上也是個人淺見,給您參考,謝謝!

阿薩姆 iT邦新手 5 級 ‧ 2021-01-21 14:19:12 檢舉

感謝兩位回覆, 目前網頁都有使用到px table之類的, 目前對於排版實在不太行, 會再斟酌看看

只用hover來觸動選單或某些展現的功能的話,會讓手機使用者無法操作
至於px的問題是我卡很久的問題,用螢幕像素點來定位,怎麼做都會跟自適應互相扞格,或許我沒做好,踩坑踩的很辛苦
至於table我已徹底棄用,目前都是以css的display:table-row,table-cell來處理,超過畫面右側的格子可折斷成滿板畫面,不致出現左右捲軸來破壞書面

一定有更好的處理方案,但....我真的是踩坑踩到怕,這裡也只是說說個人心得

另~ 不能用的還有: FLASH、網頁開啟時的背景音樂(新版手機OS瀏覽器都已將背景音樂和自動播放影片,禁用開啟時播放),還有一些IE特產function也無法使用,如window.open帶回傳值等等..

阿薩姆 iT邦新手 5 級 ‧ 2021-01-21 16:14:33 檢舉

我想這些都是前輩的經驗, 我會參考的~ 謝謝!!

tony

基本上,如果真的要做rwd。說真的,px真的盡量不要用。能完全不用是最好調整的。

一般會用到的話,大多還是需要跑js相對應用會比較好點。
或是應用在min或max上。

2.j大並沒有說錯。不要用 hover 。該事件在觸控式的設備不會被觸發。雖然一般來說我不會用這個事件在rwd上就是了。
至於用focus就見仁見智了。

3.想要真正的rwd模式,說真的千萬不要認為用table排版會比較容易方便。這點j大並沒說錯。它真的是破表原兇。我想你可能還沒遇過。
我跟j大一樣,也是被破的無可奈何。

以上是多年來的經驗,給你參考。感謝!!

tony iT邦新手 5 級 ‧ 2021-01-22 14:06:43 檢舉

了解,謝謝各位的指教:)
不過這邊我也可以推薦原PO直接去看Bootstrap官方文件中尺寸是如何設定的,會發現他們用了grid、px、%、em等方式去做到RWD,也可以直接學到更多關於排版的技巧哦!

3

目前網頁都是以PC為目標來開發排版, 如果想要以手機畫面來瀏覽的話, 是按下F12後的Toggle Device Roolbar來切換嗎?

基本的查看是這樣沒錯。但最好做好後。還是實際在手機看一下。
開發期間可以用這樣來查看。

假設問題1是對的, 那排版看起來挺糟的, 這部份該如何改善?

學吧!!!!

目前開發大量使用Bootstrap與w3schools的樣式排版, 這部分是OK的嗎?

Bootstrap針對rwd還是不錯。w3schools啥鬼??

程式開發使用Node.js, 大量使用jQuery, AngularJS, 這些在Mobile上都是相容的嗎?

前端語言與排版並無直接關係。但也不能這樣說就是了。
畢竟有些語法的確有手機不相容。(認真來說,不是手機的問題,而是瀏覽器的問題)
所以這個問題不能給你確定答案。只能說可以用。

是否有相關資源可學習? (網站 or 工具書)

找了。工具書有針對rwd相關的說明。或是參考雷神大給你的連結。
這類的教學是非常多的。但重點是你要能了解才行。
對有空間概念的人,學這種東西很快。
像我就不行了。每次都搞個四不像。

阿薩姆 iT邦新手 5 級 ‧ 2021-01-21 14:15:43 檢舉

Hi 謝謝回覆
關於w3schools, 由於是寫網頁新手, 很多排版都是找網路來拼拼湊湊, 例如這邊就有提供簡單的layout, 所以要引用他的css, 這方面敘述不清 sorry

好,我錯了。原來是再說css。
我還以為是啥框架式的東西。

不過一般來說,我會建議用一個系列就好。
混著用出問題你會很崩潰。

(曾經混用崩潰過的人,最後打掉全部重排)

Bootstrap除了本身css的應用之外,其實它也有對應的js框架處理的。
你可以發現Bootstrap會需要再載入一支js

雖然不載入也能用它的css,只是可能有一些東西就會沒作用了。

阿薩姆 iT邦新手 5 級 ‧ 2021-01-21 16:12:47 檢舉

OK 謝謝建議~

1
ccutmis
iT邦高手 4 級 ‧ 2021-01-21 16:51:10

重點都讓大佬們講得差不多了,我在這補充一些個人自學的心得給您參考:

HTML、CSS、JAVASCRIPT 是地基,有多深打多深,能打穿到地球的另一邊最好(誤)。

初學者最容易犯的毛病就是未學走先學飛(我們不是東尼史塔克也沒有AI管家賈維斯),請先利用網路資源或書籍多多充實相關基礎,網路的可以先從Google搜尋關鍵字開始,書籍方面我推薦O'REILLY這家的書(他家的HTML5、CSS相關書籍我都有買過,算有一定的品質也不難閱讀,預算不多的話可試試Google書名+pdf有時會有驚喜),基礎打穩一點你在用各種框架時可以少走很多彎路,有很多時候也是用基礎來破解一些框架本身辦不到的事情,我用CSS基礎舉個簡單的例子,CSS選擇器有所謂的優先順序,例如:

  1. html標千裡面的style="..." 高於 #id,
  2. #id 高於 .class,
  3. .class 高於 擬類別(如:hover),
  4. 擬類別 高於 屬性(如input[type="submit"]),
  5. 屬性 高於 元素擬類別(如::before) 等等...)

你在 Bootstrap 或 W3 這些 CSS 框架裡面很少會看到它教你用 style="...;...;" 這種寫法,因為一旦在html標籤裡用了這個,它的優先權最高,會導致框架設計的一些東西都套不上去(只剩Javascript能有辦法改動 style='..."),但是 style="..." 又是 HTML+CSS 初學者很容易使用的語法,比如你要把一個按鍵加紅框只要

<button style="border:solid 1px #f00;">Hello</button>

不是說絕對不能用style="..." 但是你要知道用了它會發生什麼事,
這就是為何要打好基礎的關係,而且這條路可能沒有盡頭。
(我剛開始自學的時候瀏覽器支援CSS2,CSS3還在草案階段,現在主流瀏覽器都支援CSS3了)


再來是 CSS框架 選哪個? 我個人是推薦 Bootstrap5 它的資源哪裡找? 我自己常用的兩個:

  1. 官方網站 https://getbootstrap.com/
  2. Google搜尋 'bootstrap5 '加上你想問的東西,舉個例我想知道在 bootstrap5怎樣讓元素或文字置中,我就搜 'bootstrap5 text align center' 搜到結果: https://getbootstrap.com/docs/5.0/utilities/text/ 點進去一看,各種相關的css用法都有,爬一下就會找到"text-center",排版切版遇到問題也可以上來ithelp問。

最後簡單展示一個用 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用開發者模式切換不同設備看看效果。

看更多先前的回應...收起先前的回應...
阿薩姆 iT邦新手 5 級 ‧ 2021-01-21 17:22:50 檢舉

感謝說明..目前正在看RWD相關知識
想請教一下, 最後那段code, 是使用哪個class達到切換大小會把gif隱藏?

ccutmis iT邦高手 4 級 ‧ 2021-01-21 17:26:17 檢舉
阿薩姆 iT邦新手 5 級 ‧ 2021-01-21 17:56:39 檢舉

原來是靠這些class來達到RWD的, 感謝!

ccutmis iT邦高手 4 級 ‧ 2021-01-21 18:00:41 檢舉

不客氣:D

我要發表回答

立即登入回答