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

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 */
     /*                      */
}

你有两套css，一套用于渲染较大的设备，另一套用于较小的设备。

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

Answer 2

这只能用css解决：

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

研究CSS的@media

Answer 3

如果您对不同的屏幕视图使用这些媒体查询，可能会解决您的问题。

媒体查询大型设备，如笔记本电脑，屏幕尺寸为1025像素至1280像素的桌面

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

  //Your css here

}

平板电脑，移动设备（横向布局）的媒体查询，屏幕尺寸为481px至767px

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

  //Your css here

}

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

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

          // Your css here

        }