我有两个媒体查询，但由于某种原因它们不起作用。当我更改桌面媒体查询的字体大小时，它在我的笔记本电脑上也会更改，为什么？我有一个网格系统和其他元素，我想更改它的CSS，但它并没有改变它应该如何。
例如，如果我更改笔记本电脑媒体查询的属性，它会更改桌面大小的
function Features() {
return (
<>
<Navbar />
<div class="grid-container">
<div class="the-feed">
The Feed
<h1>A CRM that fits your business</h1>
<p>Freshworks CRM adapts to the way your team works.</p>
<img className="feed-image" src={slides} alt="slides"></img>
</div>
<div className="featureLeft">
<IconContext.Provider value={{ size: '50px'}}>
<FcParallelTasks style={{justifyContent:"center", position:"relative", top:"10px"}} />
</IconContext.Provider>
<h2>Contact Lifecycle</h2>
<div className="features">
<p> A contact goes through various stages in their lifecycle. Create your own lifecycle stages based on your business process.,</p>
</div>
</div>
<div className="featureRight">
<IconContext.Provider value={{ size: '50px'}}>
<FcDataSheet style={{justifyContent:"center", position:"relative", top:"10px"}} />
</IconContext.Provider>
<h2>Custom Fields</h2>
<div className="features">
<p> took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
</div>
</div>
<div className="marginBottom">
<div className="featureLeft">
<IconContext.Provider value={{ size: '50px'}}>
<FcIdea style={{justifyContent:"center", position:"relative", top:"10px"}} />
</IconContext.Provider>
<h2>Custom Sales Activities</h2>
<div className="features">
<p> took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
</div>
</div>
</div>
<div class="marginBottom">
<div className="featureRight">
<IconContext.Provider value={{ size: '50px'}}>
<FcBullish style={{justifyContent:"center", position:"relative", top:"10px"}} />
</IconContext.Provider>
<h2>Multi Currency</h2>
<div className="features">
<p> took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
</div>
</div>
</div>
</div>
</div>
</>
)
}
export default Features/* reset */
body,
p,
a,
ul,
li {
text-decoration: none;
}
li {
list-style-type: none;
}
/* base styles */
body {
overflow-x: hidden;
font-family: 'Courier New', Courier, monospace;
}
/* mobile styles */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0px;
box-sizing: border-box;
}
#welcome {
padding: 0 20px 20px 20px;
background-color: rgba(255, 168, 0, .05);
}
.welcome-text {
grid-column: 1/6;
text-align: center;
position: relative;
left: 4rem;
}
.welcome-text a {
margin: 20px 0;
}
.welcome-img {
grid-column: 1/9;
justify-content: center;
}
.welcome-img img {
width: 50%;
}
#welcome {
padding: 100px 20px 20px 20px;
}
.welcome-text {
grid-column: 1/5;
text-align: center;
position: relative;
right: 4rem
}
.welcome-text a {
margin: 20px 0;
}
.welcome-img {
grid-column: 5/9;
justify-content: center;
}
.welcome-img img {
width: 100px;
height: 100px;
}
.feed-image {
width: 300px;
height: 300px;
margin-left: 50px;
}
.grid-container {
padding: 40px;
}
.feed-image {
height: 175px;
width: 175px;
}
/* 1- column 1 span 2
2- column 2 span 3
row 2 */
/* laptop screen */
@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: 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
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>您还需要提到较小屏幕尺寸的最大宽度：
// laptop size
@media screen and (min-width: 960px) and (max-width: 1199px) { ... }
还建议将查询从最小屏幕建立到较大屏幕。mobile<tablet<laptop<desktop<...