使用单个网格或 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/

希望这有帮助！