响应式设计

Question

我正在为桌面版本和移动版本进行设计，但是我在这里停留在按钮的位置上，我为桌面版本的按钮ID“三个，四个，五个，六个，七个，八个”编写定位CSS，并编写另一个在“ @media only屏幕和（最大宽度：600像素）{}”中为移动版本定位所有CSS，但问题是，当我打开桌面版本时，它将移动版本定位为CSS。 我该怎么做才能解决这个问题。

i have tried the important keyword but it shows the same behavior. 

#three,#four{
 background-color:blue;
 position: relative ;
 left: 380px ;
 top:0px ss;
 }
 #five,#six{
    background-color: #FFA500;
    position: relative;
     left: 0px; 
     top: 0px; 
 }
 #seven,#eight{
    background-color:  #4c4c4c;
    position: relative;
    left: 380px;
    top: 0
 }

@media only screen and (max-width: 600px){
#three{
    position: relative;
    left: 291px;
    top: 137px;
 }
 #five{
    position: relative;
    left: 291px;
    top: 141px;
}
 #seven{
    position: relative;
    left: 289px;
    top: 136px;
 }
 #two{
    position: relative;
    left: 291px;
    top: 94px;
 }
 #four{
    position: relative;
    left: 293px;
    top: 94px;
 }
 #six{
    position: relative;
    left: 296px;
    top: 94px;
 }
 #eight{
    position: relative;
    left: 295px;
    top: 94px;
}
}
this is the code.

Answer 1

我进行响应式设计的方式是使用移动优先工作流程。 这意味着没有媒体查询的默认样式适用于移动设备。

然后使用：

@media screen and (min-width: 768px) {
    /* Only applies to bigger than 768px */
}

这种方法意味着，如果您的CSS文件已正确订购（移动设备位于顶部并向上移动），则无需使用！important。