作者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/cn.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