并排两个div，但如果屏幕太小，则强制右侧div保留在左侧div上

Question

问题标题几乎总结了它。我想知道是否有可能有两个div并排，如：

DIV＃1 | DIV＃2

不过，如果屏幕太小（例如在移动设备上），我想这样的事情发生：

DIV＃2

DIV＃1

也就是说，DIV＃1滑动而不是向下DIV＃2

干杯， 本。

Answer 1

你可能使用的div浮动彼此相邻坐下。当屏幕太小时，使用@ media-queries更改此行为。在你的CSS文件：

@media only screen and (max-width: 480px) { 
    /* when window size is below 480px */ 
    div { 
     float: none; 
    } 
} 

这只是将浴液的例子：没有到您的网站上所有div如果窗口大小小于480像素较小;调整它实现你想要的东西:)

Answer 2

您可以使用CSS媒体查询来检查定位中的屏幕大小。

例如，正常的CSS只会将两个元素左移，而您的320px样式会将它们设置为非浮动。

您可以使用最小宽度和最大宽度指令检查此

<link rel='stylesheet' media='screen and (min-width: 401px) and (max-width: 900px)' href='css/medium.css' /> 

这里更多的细节 - http://css-tricks.com/css-media-queries/