响应式网站制作小贴士

Question

我是一个网络开发的新手，但我对这个领域非常感兴趣，关于制作响应式网站。

当您隐藏一个html元素(用于桌面视图)，并在较小的屏幕尺寸上显示另一个html元素时，即使这两个元素具有相同的内容，例如联系人表单，这是一种良好的编程实践吗？我确实隐藏了"html元素“，因为我发现使用媒体查询很困难……

注意:问题并不是关于我试图隐藏或显示的html元素的内容。我只想知道这样做在编程中是不是很好的实践？谢谢

Answer 1

不是的。

您必须发送标记两次，这使用了更多的带宽，并且当CSS未被应用时(例如，如果它正被搜索引擎索引机器人或使用Lynx的某人读取)，则内容被复制。

通常，人们想要这样做是因为他们想要重新排序内容。可以考虑使用Flexbox (包括order属性)来实现这一点。

Answer 2

答案是否定的，这不是一个好的实践。您需要尽量避免在桌面和移动设备上重复相同的逻辑元素。尝试使用一个元素，并通过媒体查询对其进行调整。

Answer 3

一般来说，处理响应式设计的最好方法是尽量避免隐藏和显示内容。通常，最好将站点设计为适应元素的大小调整或重新排序，而不是简单地在某些屏幕上删除它们(特别是当您似乎在询问是否应该显示具有相同内容的元素时？)

显然，这里的例外是下拉导航菜单。

这就是为什么人们倾向于说你应该首先设计移动设备。这样只会显示最重要的元素，而不会简单地隐藏不必要的元素。

我希望这是有意义的。你似乎已经理解了媒体查询，所以我建议你练习修改元素，而不是隐藏和显示它们。这种方法对于代码的可访问性和可读性来说并不是很好。