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

Question

我正在嘗試製作如圖所示的響應式卡片佈局。

目前我正在做的是分別為電腦、平板電腦和行動裝置建立佈局。然後在 media 查詢 的幫助下，我將其他兩個視圖的顯示屬性設為 display: none 。

例如：如果我在電腦視圖中，電腦的卡片佈局將不會將顯示設為“無”，而另外兩台電腦的 顯示將為 none。

這可行，但會導致大量冗餘。有一種方法可以使用 Flex 或網格實現所有三種佈局。

請指導我。

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

#希望有幫助！