国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

使用單個(gè)網(wǎng)格或 Flex 創(chuàng)建多樣化的卡片布局:實(shí)用指南
P粉808697471
P粉808697471 2024-04-02 21:07:36
0
2
714

我正在嘗試制作如圖所示的響應(yīng)式卡片布局。

目前我正在做的是分別為計(jì)算機(jī)、平板電腦和移動(dòng)設(shè)備創(chuàng)建布局。然后在 media 查詢 的幫助下,我將其他兩個(gè)視圖的顯示屬性設(shè)置為 display: none 。

例如:如果我在計(jì)算機(jī)視圖中,計(jì)算機(jī)的卡片布局將不會(huì)將顯示設(shè)置為“無”,而另外兩個(gè)計(jì)算機(jī)的 顯示將為 none

這可行,但會(huì)導(dǎo)致大量冗余。有一種方法可以使用 Flex 或網(wǎng)格實(shí)現(xiàn)所有三種布局。

請(qǐng)指導(dǎo)我。

P粉808697471
P粉808697471

全部回復(fù)(2)
P粉706038741

每次您想要為屏幕尺寸設(shè)計(jì)某種設(shè)計(jì)時(shí),不必設(shè)置 display: none媒體查詢帶來了一個(gè)叫做斷點(diǎn)的東西,您可以在其中指定屏幕的寬度(例如min-width: 768px)。對(duì)于移動(dòng)屏幕尺寸,只需將 css 放在媒體查詢下,并設(shè)置 max-width: 600px。此外,您可以使用 orientation 屬性來區(qū)分橫向縱向模式。
有關(guān)查詢和屏幕尺寸的更多信息

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

Flex 可以輕松實(shí)現(xiàn)這一點(diǎn)。

根據(jù)屏幕寬度,您可以添加媒體查詢,如下所示,您可以調(diào)整框?qū)挾群妥畲髮挾葋碚{(diào)整框的大小。

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

希望這有幫助!

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板