Question

我正在为台式机和移动版进行设计，但是我在这里停留在按钮的位置上，我为台式机版写了ID为“ 3、4、5、6、7、8”的位置CSS的定位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。

响应式设计

1 个答案: