Créez diverses mises en page de cartes à l'aide d'une seule grille ou de Flex : un guide pratique

Question

J'essaie de créer une mise en page de carte réactive, comme indiqué sur l'image.

Ce que je fais actuellement, c'est créer séparément des mises en page pour les ordinateurs, les tablettes et les appareils mobiles. Puis dans media 查询 的帮助下，我将其他两个视图的显示属性设置为 display: none .

Par exemple : si je suis dans la vue Ordinateurs, la disposition de la carte de l'ordinateur ne définira pas l'affichage sur "Aucun", alors que celle des deux autres ordinateurs 显示将为 none.

Cela fonctionne, mais entraîne beaucoup de redondance. Il existe un moyen de réaliser les trois mises en page en utilisant Flex ou Grid.

S'il vous plaît, guidez-moi.

Answer 1

Vous n'avez pas besoin de définir l'attribut display: none 。 媒体查询带来了一个叫做断点的东西，您可以在其中指定屏幕的宽度（例如min-width: 768px）。对于移动屏幕尺寸，只需将 css 放在媒体查询下，并设置 max-width: 600px。此外，您可以使用 orientation pour différencier le mode paysage ou portrait chaque fois que vous souhaitez créer un certain design pour une taille d'écran.
Plus d'informations sur les requêtes et les tailles d'écran

//for mobile
    @media query and only screen(max-width: 600px) 
    {
        display:flex;
        //some more css-code
    }
    
//for tablet
    @media query and only screen(min-width: 600px) 
   {

    display: flex;
   //some more css-code

   }
   
//for desktop size
   @media query and only screen(min-width: 768px) 
  {
     display: flex;
     //some more css-Code
  }

Assurez-vous de suivre les
Directives MDN

Answer 2

Flex rend cela facile.

En fonction de la largeur de l'écran, vous pouvez ajouter des requêtes multimédias comme indiqué ci-dessous et vous pouvez ajuster la largeur de la boîte et la largeur maximale pour redimensionner la boîte.

/* tablet view */
@media only screen and (max-width: 768px){
    .parent-container {
        max-width: 320px;
    }
}


/* mobile view */
@media only screen and (max-width: 480px){
    .parent-container {
        flex-direction: column;
        align-items: center;
    }
}

Vous pouvez vérifier https://jsfiddle.net/rx4hvn/wbqoLe0y/35/

J'espère que cela vous aidera !