Question

我有两个媒体查询，但由于某种原因它们不起作用。当我更改桌面媒体查询上的字体大小时，它会在我的笔记本电脑上更改，这是为什么？我有一个网格系统和其他元素，我想更改其 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>

Answer 1

您还需要提及较小屏幕尺寸的最大宽度：

// laptop size
@media screen and (min-width: 960px) and (max-width: 1199px) { ... }

还建议建立从小屏幕到大屏幕的查询。 mobile<tablet<laptop<desktop<...

笔记本电脑屏幕上的笔记本电脑 CSS 没有改变

1 个答案: