我的媒体查询命令不起作用

Question

我有一种流畅且响应迅速的布局 - 两个 div：.left 和 .right

我应该如何编写我的@media 查询命令，以便在 .container 的宽度不超过 800 像素之前，我的 .left 和 .right 始终保持 400 像素的宽度，并且当容器的宽度从 800 像素或更大时我的 .left 和 .right 也变宽了。

此命令不起作用：

@media only screen and (max-width: 800px) 


.container .row .columns.eight  {
  width: 400px;
}

当我缩小屏幕时，我还希望我的.right div 不会落在.left 之下。

Answer 1

媒体查询不起作用，因为您没有将媒体查询括在大括号中

@media only screen and (max-width: 800px) 
 { /*<- missing from your code */
      .container .row .columns.eight  {
       width: 400px;
       }
 }/*<- missing from your code */

• 为防止 div 换行，请将
  white-space:nowrap; 添加到 .left /right div 和
  display:inline-block; 到 .left 和 .right div 的容器

fiddle here ~|~ fiddle with media query

CSS

.cont {
    white-space:nowrap;
    width:100%;
}
.right {
    border:1px solid black;
    width:50%;
    height:200px;
    display:inline-block;
}
.left {
    border:1px solid red;
    width:50%;
    height:200px;
    display:inline-block;
}