html - 根据屏幕分辨率更改图像位置

Question

我最近一直在学习响应式网页设计。我想要实现的目标显示在下面的图片中，一张是关于网站在桌面上的样子，另一张是关于移动设备的。如您所见，有四个框。单击该框后，您将在文本框中看到一些引用该框的文本。我一直在想的是如何处理这个布局。是否只是媒体查询和不同的 CSS 样式取决于屏幕分辨率？或者我应该以某种方式(jquery？)切换 DOM 中的元素顺序？我不确定如何处理。感谢您的任何建议!

Answer 1

要扩展@D.Fraga 的评论，可以按如下方式使用 css @media 规则:

@media screen and (min-width: 480px) 
    /* css for large device */
    /*                      */
}


@media screen and (max-width: 480px) {
     /* css for small device */
     /*                      */
}

您有 2 套 CSS，一套用于渲染较大的设备，另一套用于较小的设备。

您还可以考虑将 javascript screen.width 与某种框架(即 angularjs)结合使用，以根据屏幕尺寸动态呈现 DOM 元素(尽管我强烈推荐前者)。