Question

我正在尝试采用三种不同的布局
页面顶部的桌面图像和文本块
中型设备-图片位于页面顶部，文本位于页面底部
页面底部的移动文本

我已经弄清楚了我想怎么做台式机和移动设备，我想我已经找到了中型设备，但是它不能正常工作。

HTML

<div class="some-container--top">
    <div class="row">
       <div class="column image">
         <img src="{image url}" alt="alt" />
       </div>

    <div class=" column container">
       <img src="{image url}" alt="color" />
       <div class="text-block"> 
          <h3>title</h3>
          <p>text</p>
       </div>
   </div>
 </div>
</div>

<div class="some-container--bottom">
<p>text</p>
</div>

CSS：


@media only screen and (min-width: 1000px){
.some-container--bottom{
display:none;
}
}

@media only screen and(max-width:999px) and (min-width:601px){
.container{
display:none;
}
.some-container--bottom{
display:none;
}
}

@media only screen and (max-width: 600px){
 .some-container--top{
 display:none;
}
}

因此，台式机作品（即，我的图片和文字正确显示）和移动作品（我的文字在我想要的位置显示）。但是，对于我的中型设备，它会显示所有内容（页面底部和顶部均显示文本和图像）。我的代码有什么问题？

Answer 1

您的CSS规则中有一个错误：

@media only screen and(max-width:999px) and (min-width:601px){
                      ^ There must be a space between 'and' and the opening parenthesis

Demo

媒体查询问题：调整/移动块

1 个答案: