媒体查询不适用

问题描述

我对我的第一个项目几乎已经完成，我正在应用媒体查询，但是我看不到它们能完全正常工作。我将不胜感激。也许我的网格代码是错误的...

问题： 网格项目不会在4列中对齐（媒体查询的最小宽度为1024px）。根据针对ipad屏幕的移动设备和媒体查询的代码，它们将保留在一两列中。

<section class="grid-container">

      <div class= "grid-item one">
        <h5>ARTICLE</h5>  
      <a href="#">
          <img src="img/chocolate.png" alt= "Chocolate image"> 
        </a>
        
        <h3>Explore the world of chocolate</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
          Labore eos in deserunt architecto,accusantium quia eaque iste delectus id reiciendis inventore amet possimus! 
          Culpa deleniti nulla dolorem,voluptas minima sapiente. </p>
      </div> 

-----HERE ITEM 2 to 4,I JUMP to the ITEM 5----


      <div class= "grid-item five">
       <h5>TIPS</h5>  
        <a href="#">
          <img src="img/foodmarket.jpg" alt= "Foodmarket image"> 
        </a>
        
        <h3>Best foodmarkets you have to visit</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
          Labore eos in deserunt architecto,voluptas minima sapiente. 
        </p>
      </div>

      <div class= "grid-item six">
       <h5>RECIPE</h5>  
        <a href="#">
          <img src="img/recetamole.png" alt= "Mole dish image"> 
        </a>
        
        <h3>How to make mole from scratch</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
          Labore eos in deserunt architecto,voluptas minima sapiente. 
        </p>
      </div>


    </section>

**/**** MEDIA QUERIES IN CSS ****/**

@media (min-width: 768px) {

  header {
    justify-content: space-between;
  }

  nav {
    display: inline-block;
    align-items: flex-end;
    font-family: 'Roboto',sans-serif;
    font-size: 20px;
    justify-content: space-around;
    padding: 0 20px;
  }


  h1 {
    font-size: 42px
  }
  
  p {
    font-size: 32px;
  }
  img {
    width: 100%; 
  }
  
  .one,.two {
    grid-column: span 2;
  }

  .three,.four {
    grid-column: span 2;
  }

  .five,.six,{
    grid-column: span 2;
  }
  
  .seven,.eight {
    grid-column: span 2;
  }
 
}
@media (min-width: 1024) {

  .flex-parent {
    flex-direction: row; 
    justify-items: flex-end; 
    
   }

   .flex-child {
     width: 100%;    
   }
   
   .one,.two,.three,.four {
    grid-column: span 1;
  }

   .five,.seven,.eight {
    grid-column: span 1;
   }
} 

解决方法

@media (min-width: 1024px) {

  .flex-parent {
    flex-direction: row; 
    justify-items: flex-end; 
    
   }

   .flex-child {
     width: 100%;    
   }
   
   .one,.two,.three,.four {
    grid-column: span 1;
  }

   .five,six,seven,eight {
    grid-column: span 1;
   }
} 

我认为您没有提到像素@media (min-width: 1024px)

添加此标题部分以及

<meta content="width=device-width,initial-scale=1" name="viewport" />

,

确保您定义了@media only screen and (min-width: 768px){ /*Your changes go here*/ }

您甚至可以编写完整的内容以更加准确：

var storage = multer.diskStorage({
  destination: function (req,file,cb) {
    cb(null,'./uploads/');
  },filename: function (req,cb) {
    console.log(req.file);
    cb(null,Date.now() + path.extname(file.originalname));
  },}
);

var save = multer({ storage: storage });

router.post('/save',save.single('somefile'),(req,res) => {
    console.log(req.file);
    res.send();
});

请记住在，和（