作者mauve (mauve是淡紫色)
看板Web_Design
標題[討論] 關於相同代碼在同一頁面出現兩三次...
時間Sat Sep 22 21:30:55 2018
最近在寫一個可以放自己寫的程式的網站
而且是基於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://webptt.com/m.aspx?n=bbs/Web_Design/M.1537623060.A.856.html
2F：推 torali: 看起來寫一個就夠，如果是我會用position和flex排版，然09/22 22:48
3F：→ torali: 後在media query去操作這兩個屬性變成你要的樣子09/22 22:48
是沒錯，但我遇到兩個問題：
1. 電腦端兩形式變化時，Scrolling會很不自然
2. media是窄的時候如果隱藏了menu
回到寬的時候menu還是消失的狀態
用了jQuery似乎沒效，不知道是不是因為寫得不好
※ 編輯: mauve (27.242.225.109), 09/23/2018 07:26:16
4F：→ jhnny97: 在最頂端放一個空的元素卡位scroll就順了(？ 09/23 08:22
這樣概念又不太一樣了
5F：推 ymcheung: 確實也是有 flexbox order 搞不定的時候 09/23 09:26
6F：→ ymcheung: 如果網站規模很大，我會請後端幫忙判斷 device 各自出 09/23 09:27
7F：→ jherk: 用js操作class, class寫css media控制rwd顯示/隱藏 09/23 13:18
※ 編輯: mauve (180.204.80.86), 09/23/2018 15:38:18
8F：噓 yzfr6: 程式碼 09/24 16:09
9F：推 jake255121: 我只好奇你的文章怎麼會這麼異國風情 09/25 15:30
哈哈哈哈哈，因為看起來會有很厲害的錯覺吧
※ 編輯: mauve (125.231.38.16), 09/26/2018 23:06:55