Erstellen Sie vielfältige Kartenlayouts mit einem einzigen Raster oder Flex: eine praktische Anleitung

Question

Ich versuche, ein responsives Kartenlayout zu erstellen, wie im Bild gezeigt.

Derzeit erstelle ich Layouts für Computer, Tablets und Mobilgeräte separat. Dann in media 查询 的帮助下，我将其他两个视图的显示属性设置为 display: none .

Zum Beispiel: Wenn ich mich in der Ansicht „Computer“ befinde, stellt das Kartenlayout des Computers die Anzeige nicht auf „Keine“ ein, während die der anderen beiden Computer 显示将为 none.

Das funktioniert, führt aber zu einer Menge Redundanz. Es gibt eine Möglichkeit, alle drei Layouts mit Flex oder Grid zu erreichen.

Bitte leite mich.

Answer 1

每次您想要为屏幕尺寸设计某种设计时，不必设置 display: none 。 媒体查询带来了一个叫做断点的东西，您可以在其中指定屏幕的宽度（例如min-width: 768px）。对于移动屏幕尺寸，只需将 css 放在媒体查询下，并设置 max-width: 600px。此外，您可以使用 orientation 属性来区分横向或纵向模式。
有关查询和屏幕尺寸的更多信息

//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
  }

确保遵循
MDN 指南

Answer 2

Flex 可以轻松实现这一点。

根据屏幕宽度，您可以添加媒体查询，如下所示，您可以调整框宽度和最大宽度来调整框的大小。

/* 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;
    }
}

您可以查看https://jsfiddle.net/rx4hvn/wbqoLe0y/35/

希望这有帮助！