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

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/

#希望有幫助！