我的CSS样式没有应用于笔记本电脑大小的媒体查询。我尝试使用最小和最大宽度，但没有成功。我想模仿这种布局：
https://www.freshworks.com/crm/features/
@media screen and (min-width: 960px) and (max-width:1199px){
.grid-container {
display: grid;
grid-template-columns: repeat(3, 30vw);
/* grid-template-rows: 430px 250px; */
grid-template-rows: auto auto;
padding: 0px;
margin: 50px 0px 50px 0px;
}
.featureLeft{
position: relative;
right: -30px;
}
.featureRight{
position: relative;
left: 50px;
}
.marginBottom{
position: relative;
bottom: 30px;
}
.features{
width:400px
}
p{
font-size: 16px;
}
h1{
font-size: 25px;
}
h2{
word-wrap: break-word;
font-size: 1.125rem;
}
.grid-container>div {
text-align: left;
padding: 30px
}
.container {
width: 90%;
margin-left: 10px;
}
.the-feed {
grid-area: 1 / 1 / 3 ;
margin-left: 160px;
}
.feed-image{
height: 305px;
margin-top: 50px;
width: 200px;
position: relative;
right: 30px
}
}
/* desktop styles */
@media screen and (min-width: 1200px){
.grid-container {
display: grid;
grid-template-columns: repeat(3, 30vw);
/* grid-template-rows: 430px 250px; */
grid-template-rows: auto auto;
padding: 0px;
margin: 50px 0px 50px 0px;
}
.featureLeft{
position: relative;
right: -30px;
}
.featureRight{
position: relative;
left: 50px;
}
.marginBottom{
position: relative;
bottom: 30px;
}
.features{
width:400px
}
p{
font-size: 16px;
}
h1{
font-size: 25px;
}
h2{
word-wrap: break-word;
font-size: 1.125rem;
}
.grid-container>div {
text-align: left;
padding: 30px
}
.container {
width: 1300px;
margin-left: 20px;
}
.the-feed {
grid-area: 1 / 1 / 3 ;
margin-left: 160px;
}
.feed-image{
height: 305px;
margin-top: 50px;
width: 200px;
position: relative;
right: 30px
}
}我已经让网格工作了，但它似乎在我的桌面上间隔开了，当我把功能移得更近时，即使我有单独的媒体查询，笔记本电脑的大小也会变得一团糟
这是我的密码笔：https://codepen.io/shuibcodes/pen/xxqWajO
实际上，您的笔记本电脑媒体查询样式已应用，但它们的样式似乎不适合您共享的引用。
检查这些修复程序。
@media screen and (min-width: 960px) and (max-width: 1199px) {
.grid-container {
display: grid;
grid-template-columns: repeat(2, 50vw); //Changed
....
.the-feed {
grid-column: 1/-1; //Changed
}
完整示例：https://codepen.io/AravinthAro/pen/gOmeqjJ