Buat susun atur kad yang pelbagai menggunakan grid tunggal atau Flex: panduan praktikal

Question

Saya cuba membuat susun atur kad responsif seperti yang ditunjukkan dalam gambar.

Apa yang saya lakukan pada masa ini ialah mencipta reka letak untuk komputer, tablet dan peranti mudah alih secara berasingan. Kemudian dalam media 查询 的帮助下，我将其他两个视图的显示属性设置为 display: none .

Contohnya: Jika saya dalam paparan Komputer, reka letak kad komputer tidak akan menetapkan paparan kepada "Tiada", manakala dua komputer lain 显示将为 none.

Ini berfungsi, tetapi mengakibatkan banyak redundansi. Terdapat cara untuk mencapai ketiga-tiga susun atur menggunakan Flex atau Grid.

Tolong bimbing saya.

Answer 1

Anda tidak perlu menetapkan atribut display: none 。 媒体查询带来了一个叫做断点的东西，您可以在其中指定屏幕的宽度（例如min-width: 768px）。对于移动屏幕尺寸，只需将 css 放在媒体查询下，并设置 max-width: 600px。此外，您可以使用 orientation untuk membezakan antara mod landskap atau potret setiap kali anda ingin mencipta reka bentuk tertentu untuk saiz skrin.
Maklumat lanjut tentang pertanyaan dan saiz skrin

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

Pastikan ikut
Garis Panduan MDN

Answer 2

Flex memudahkan ini.

Berdasarkan lebar skrin anda boleh menambah pertanyaan media seperti yang ditunjukkan di bawah dan anda boleh melaraskan lebar kotak dan lebar maksimum untuk mengubah saiz kotak.

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

Anda boleh menyemak https://jsfiddle.net/rx4hvn/wbqoLe0y/35/

Semoga ini membantu!