时间戳

首页 > 解决方案 > 响应式设计制作

html - 响应式设计制作

问题描述

我正在为桌面版和移动版进行设计，但我被按钮的位置困住了，我为桌面版的按钮 ID“三、四、五、六、七、八”编写了定位 css，并编写了另一个在“@media only screen and (max-width: 600px){}”中为所有移动版本定位 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.

标签： htmlcssresponsive-designmedia-queries

解决方案

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

然后使用：

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

这种方法意味着如果您的 CSS 文件排序正确，移动设备位于顶部并向上移动，则不需要使用 !important。

推荐阅读