我正在尝试在Visual Studio代码中调整桌面到移动的的屏幕大小。问题是：通过使用媒体查询修改CSS，因此如果视口大于800px，则应显示如下：
如果小于800px，则应显示如下：
我就是这么做的，但我想我错了：
@media screen and (max-width: 600px)
{
}
#container {
width: 100%;
margin:auto;
}
#header {
width: 100%;
height: 100px;
color: #ffffff;
background-color:rgb(101, 161, 109);
}
#sidebar {
width: 20%;
height: 500px;
background-color: rgb(251, 127, 255);
float:left;
}
#main {
width: 80%;
height: 500px;
background-color: brown;
float: left;
}
#footer {
width: 100%;
height: 100px;
background-color:aqua;
float:left;
}
@media screen and (min-width : 600px) {
}
#container {
width: 100%;
margin:auto;
}
#header {
width: 100%;
height: 100px;
color: #ffffff;
background-color:rgb(101, 161, 109);
}
#sidebar {
width: 100%;
height: 500px;
background-color: rgb(251, 127, 255);
float:left;
}
#main {
width: 100%;
height: 500px;
background-color: brown;
float: left;
}
#footer {
width: 100%;
height: 100px;
background-color:aqua;
float:left;
}我尝试在Visual Studio代码中使用Media Queries将桌面屏幕大小调整为移动的，但代码似乎不起作用。
2条答案
按热度按时间nfs0ujit1#
您的媒体查询代码在媒体查询声明之外。正确的格式应该是：
hk8txs482#
对于媒体查询，css必须介于
{}之间，如下所示：另外，跨视点相同的css不应该在每个媒体查询中重复，例如，由于上面的代码在两个媒体查询中，你可以把它从媒体查询中移到主css块中。