使用单个网格或 Flex 创建多样化的卡片布局：实用指南-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

使用单个网格或 Flex 创建多样化的卡片布局：实用指南

P粉808697471 2024-04-02 21:07:36

[CSS3讨论组]

1066

我正在尝试制作如图所示的响应式卡片布局。

目前我正在做的是分别为计算机、平板电脑和移动设备创建布局。然后在 media 查询 的帮助下，我将其他两个视图的显示属性设置为 display: none 。

例如：如果我在计算机视图中，计算机的卡片布局将不会将显示设置为“无”，而另外两个计算机的 显示将为 none。

这可行，但会导致大量冗余。有一种方法可以使用 Flex 或网格实现所有三种布局。

请指导我。

P粉808697471

全部回复(2)

P粉7060387412024-04-03 13:04:43 2楼

每次您想要为屏幕尺寸设计某种设计时，不必设置 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 指南

赞 +0

添加回复

P粉2041364282024-04-03 10:39:35 1楼

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/

希望这有帮助！

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>