使用單一網格或 Flex 建立多樣化的卡片佈局：實用指南

Question

我正在嘗試製作如圖所示的響應式卡片佈局。目前我正在做的是分別為電腦、平板電腦和行動裝置建立佈局。然後在media查詢的幫助下，我將其他兩個視圖的顯示屬性設定為display:none。例如：如果我在電腦視圖中，電腦的卡片佈局將不會將顯示設為“無”，而另外兩台電腦的顯示將為none。這可行，但會導致大量冗餘。有一種方法可以使用Flex或網格實現所有三種佈局。請指導我。

P粉706038741 · Answer

每次您想要為螢幕尺寸設計某種設計時，不必設定 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 指南

P粉204136428 · Answer

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/

#希望有幫助！