我正在使用CSS媒体查询来提供我网站的不同视图。基本上只是取决于宽度我显示/隐藏某些元素。
现在我还需要根据宽度移动东西。这意味着DOM元素必须移动到DOM树中的不同位置。
由于它包含表单和其他独特的东西,我不能只在DOM树中使用它两次并切换可见性。我真的需要移动它,最好使用jQuery。
我已经发现了这个: http://css-tricks.com/media-query-change-detection-in-javascript-through-css-animations/ 但它真的是唯一的方式吗?
答案 0 :(得分:4)
答案 1 :(得分:3)
不,不是唯一的方法。
您始终可以使用js来使页面响应。
另一个好的js插件是response.js
但最重要的是如何进行有效的媒体查询的概念。
现在,良好的趋势是根据您的网页内容而不是某些固定宽度的断点进行媒体查询。
以下是一些有趣的文章。
答案 2 :(得分:0)
您可以使用window.onResize
事件来检测宽度的变化,并相应地使用它。
答案 3 :(得分:0)
您无需将元素移动到DOM树中的其他位置 - 您需要将其移动到屏幕上的其他位置。适当的Web开发具有内容和表示的分离 - HTML文档中的信息位置与屏幕上的位置几乎没有关系。这个谈论CSS定位的空间不大,但我会查看位置:绝对位置:固定和浮动。
答案 4 :(得分:0)
您可以使用use vanilla js
if (window.innerWidth < 768)
{
//do something here
}