媒体查询问题技术评估

Question

我是新来的。 尝试通过此评估以进入该计划。 无论出于何种原因，我都无法弄清楚这部分。下面是任务和代码。 我不确定代码是否正确。因此，如果有人可以帮助我，我将不胜感激。

当窗口宽度大于 600 像素时，具有 600px 的"form"元素

@media screen and(min-width:599px) {
form {
display: grid;
width:600px;
margin: 0 auto;
position: relative;
grid-template-columns:600px;
}
}
@media screen and (max-width:601px){
form {
display: grid;
position: relative;
grid-template-columns:600px;
width:100%;
}
}

Answer 1

媒体查询的工作方式如下：

form{
//some design untill the screen is 600px
}
@media screen and (min-width:600px) {
form {
//design when screen is 600px or less than 600px
display: grid;
width:600px;
margin: 0 auto;
position: relative;
grid-template-columns:600px;
}
}

要查看有关媒体采石场的更多代码，您可以查看我的 git：

link：https：//github.com/RudeSoul/Leapfrog/blob/master/FinalDesign/Responsive/css/mediaq.css

要了解有关此访问的更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries https://www.w3schools.com/css/css3_mediaqueries.asp