我正在嘗試制作如圖所示的響應(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)我。
每次您想要為屏幕尺寸設(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 指南
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/
希望這有幫助!