响应式设计-制作
响应式设计-制作
提问于 2019-07-13 17:26:09
我正在为桌面和移动版本做设计，但我被按钮的位置卡住了，我写了桌面版本的按钮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.回答 1
Stack Overflow用户
发布于 2019-07-13 17:42:27
我对网页设计的回应是使用移动优先的工作流程。这意味着没有媒体查询的默认样式是针对移动设备的。
然后使用：
@media screen and (min-width: 768px) {
/* Only applies to bigger than 768px */
}这种方法意味着，如果您的CSS文件排序正确，则不需要使用!important，将mobile放在顶部并向上移动。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57017863
复制相关文章
相似问题
腾讯云开发者
