[討論] 關於相同代碼在同一頁面出現兩三次...

看板Web_Design作者 (mauve是淡紫色)時間5年前 (2018/09/22 21:31), 5年前編輯推噓2(315)
留言9則, 7人參與, 5年前最新討論串1/1
最近在寫一個可以放自己寫的程式的網站 而且是基於WordPress的 不過因為是第一次接觸RWD網頁設計 因此花了好一大把時間進度卻很慢 其中在做手機端與電腦端Navigation Bar的適配時 發現當為了達到某些功能 有些代碼需要重複寫進去同一個頁面才能達到 像是一個選單在不同裝置想呈現不同效果 我就在同一個頁面加入了3次取得選單html的php代碼 這是我網頁上呈現Navigation Bar的三種形式: Desktop-Original: http://i.imgur.com/sxQmLh8.jpg
Scroll to Fixed: http://i.imgur.com/SDw7orw.jpg
Mobile: http://i.imgur.com/PJAspq6.jpg
最後附上因為走投無路而勉強寫進的三個相同的代碼: http://i.imgur.com/XHjoIb6.jpg
想請問一下各位高手 做成這樣還算是一個好的rwd網頁嗎? 還是這一切都是因為自己經驗不足或是太笨? -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 39.10.233.103 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1537623060.A.856.html

09/22 21:55, 5年前 , 1F
09/22 21:55, 1F

09/22 22:48, 5年前 , 2F
看起來寫一個就夠,如果是我會用position和flex排版,然
09/22 22:48, 2F

09/22 22:48, 5年前 , 3F
後在media query去操作這兩個屬性變成你要的樣子
09/22 22:48, 3F
是沒錯,但我遇到兩個問題: 1. 電腦端兩形式變化時,Scrolling會很不自然 2. media是窄的時候如果隱藏了menu 回到寬的時候menu還是消失的狀態 用了jQuery似乎沒效,不知道是不是因為寫得不好 ※ 編輯: mauve (27.242.225.109), 09/23/2018 07:26:16

09/23 08:22, 5年前 , 4F
在最頂端放一個空的元素卡位scroll就順了(?
09/23 08:22, 4F
這樣概念又不太一樣了

09/23 09:26, 5年前 , 5F
確實也是有 flexbox order 搞不定的時候
09/23 09:26, 5F

09/23 09:27, 5年前 , 6F
如果網站規模很大,我會請後端幫忙判斷 device 各自出
09/23 09:27, 6F

09/23 13:18, 5年前 , 7F
用js操作class, class寫css media控制rwd顯示/隱藏
09/23 13:18, 7F
※ 編輯: mauve (180.204.80.86), 09/23/2018 15:38:18

09/24 16:09, 5年前 , 8F
程式碼
09/24 16:09, 8F

09/25 15:30, 5年前 , 9F
我只好奇你的文章怎麼會這麼異國風情
09/25 15:30, 9F
哈哈哈哈哈,因為看起來會有很厲害的錯覺吧 ※ 編輯: mauve (125.231.38.16), 09/26/2018 23:06:55
文章代碼(AID): #1RfaGKXM (Web_Design)