根据屏幕分辨率更改图像位置答案

【问题标题】：Change image position depending on screen resolution根据屏幕分辨率更改图像位置
【发布时间】：2019-05-13 09:49:52
【问题描述】：

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

【问题讨论】：

标签： html css twitter-bootstrap responsive-design responsive

【解决方案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，一套用于渲染较大的设备，另一套用于较小的设备。

您也可以考虑使用带有某种框架（即 angularjs）的 javascript screen.width 来根据屏幕大小动态呈现 DOM 元素（尽管我强烈推荐前者）。

【讨论】：

【解决方案2】：

这只能用 css 解决：

@media (max-width: 420px){
 /* Your Code */
}

学习@media的CSS

【讨论】：

【解决方案3】：

如果您将这些媒体查询用于不同的屏幕视图，也许您的问题会得到解决。

针对屏幕尺寸为 1025px 到 1280px 的笔记本电脑、台式机等大型设备的媒体查询

@media (min-width: 1025px) and (max-width: 1280px) {

  //Your css here

}

屏幕尺寸为 481 像素到 767 像素的平板电脑、移动设备（横向布局）的媒体查询

@media (min-width: 481px) and (max-width: 767px) {

  //Your css here

}

屏幕尺寸为 320px 到 479px 的智能手机移动媒体查询（纵向布局）

@media (min-width: 320px) and (max-width: 480px) {

          // Your css here

        }

【讨论】：