Rumah > Artikel > hujung hadapan web > Reka Bentuk Web Responsif dengan Grid CSS dan Flexbox

Reka Bentuk Web Responsif dengan Grid CSS dan Flexbox

PHPzasal: 2024-08-05 21:34:52871semak imbas

Responsive Web Design with CSS Grid and Flexbox

Reka Bentuk Web Responsif Menggunakan Grid CSS dan Flexbox

Reka bentuk web responsif ialah cara untuk membangunkan tapak web supaya ia berfungsi dengan baik pada pelbagai jenis peranti dan saiz skrin. Daripada perlu membuat berbilang versi tapak untuk peranti yang berbeza, reka bentuk responsif menggunakan grid dan reka letak yang fleksibel, pertanyaan media dan imej lancar untuk menjadikan pengalaman pengguna lebih baik, merentas semua platform.

Mengapa Reka Bentuk Web Responsif Penting?

Memandangkan semakin ramai orang di seluruh dunia menggunakan telefon bimbit dan tablet untuk menyemak imbas internet, mempunyai tapak web responsif bukanlah satu pilihan lagi—ia adalah satu keperluan. Reka bentuk responsif membolehkan kebolehgunaan yang lebih baik dengan membenarkan pengguna mengakses kandungan dengan lancar, tanpa mengira peranti yang mereka gunakan. Ia juga meningkatkan pengalaman pengguna dengan memastikan kandungan adalah koheren secara visual dan mudah dibaca merentas peranti Ini boleh mengurangkan kekecewaan dan menggalakkan interaksi. Apatah lagi, reka bentuk responsif tapak web kalis masa hadapan, membenarkan mereka menyesuaikan diri dengan peranti baharu tanpa perlu melakukan reka bentuk semula yang meluas.

Hari ini, kita akan melihat asas reka bentuk web responsif dan memberi tumpuan terutamanya pada dua teknik CSS yang berkuasa: Flexbox dan CSS Grid. Kami akan menunjukkan cara reka letak ini menyesuaikan diri dengan saiz skrin yang berbeza menggunakan tapak web ringkas dengan kotak dan nombor berwarna-warni.

Sejarah Ringkas Reka Bentuk Web Responsif

Reka bentuk web responsif telah banyak berubah sejak zaman awal internet. Pertanyaan media, yang menggunakan gaya berdasarkan ciri peranti, seperti saiz skrin, peleraian dan orientasi. telah diperkenalkan pada awal 2000-an, Flexbox telah dilancarkan pada 2012 dan CSS Grid telah diterima pakai pada 2017. Inovasi ini telah membolehkan pereka bentuk untuk mencipta reka letak yang boleh disesuaikan pada beberapa peranti yang berbeza, memberikan pengalaman yang lebih baik untuk pengguna.

Mencipta Reka Letak Responsif dengan Grid CSS dan Flexbox

Sekarang, mari lihat beberapa contoh praktikal yang membolehkan kita melihat cara Flexbox dan Grid CSS berfungsi.

Reka Letak Grid Responsif: Grid Warna

Kami akan membuat reka letak mudah menggunakan Grid CSS.

HTML untuk Tata Letak Grid:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Grid</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="grid-container">
        <div class="grid-item" style="background-color: #FF5733;">1</div>
        <div class="grid-item" style="background-color: #33FF57;">2</div>
        <div class="grid-item" style="background-color: #3357FF;">3</div>
        <div class="grid-item" style="background-color: #FF33A1;">4</div>
        <div class="grid-item" style="background-color: #33FFF1;">5</div>
        <div class="grid-item" style="background-color: #FFA133;">6</div>
    </div>
</body>
</html>

HTML:

Penanda HTML mencipta bekas responsif (bekas grid) dan kotak berwarna-warni (item grid) dengan nombor dan warna latar belakang yang berbeza. Teg meta port pandang membenarkan susun atur skala pada peranti yang berbeza.

CSS untuk Reka Letak Grid:

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f0f0f0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    padding: 20px;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

CSS:

CSS untuk reka letak grid menggunakan sifat grid yang berbeza untuk menjadi lebih responsif. Paparan: grid; pengisytiharan menetapkan elemen dengan bekas grid kelas sebagai bekas grid, supaya kita boleh memanfaatkan semua grid yang ditawarkan. Lajur-templat-grid: ulangi(automuat, minmax(100px, 1fr)); sifat mentakrifkan cara lajur dalam grid distrukturkan: ia melaraskan bilangan lajur secara automatik berdasarkan ruang yang tersedia, dengan setiap lajur mempunyai lebar minimum 100 piksel dan maksimum 1 pecahan (1fr) ruang yang tersedia. Reka bentuk ini membolehkan grid menyesuaikan diri dengan saiz skrin yang berbeza, supaya item grid tidak melimpah atau mewujudkan jurang yang tidak sedap dipandang. Jurang: 10px; hartanah menggunakan jarak yang konsisten pada item grid. Akhir sekali, kami menyusun elemen grid-item dengan paparan: flex; dan pusatkan kandungan mereka dengan justify-content: center; dan align-item: tengah. Dengan cara ini, setiap item adalah tersusun dan seimbang.

Contoh Reka Bentuk Web Responsif: Susun Atur Grid

Reka letak grid ini menggunakan:

Kiraan Lajur Dinamik: Grid melaraskan bilangan lajur secara automatik agar sesuai dengan lebar port pandangan, dengan item mengambil sekurang-kurangnya 100px.
Saiz Fleksibel: muat automatik membolehkan kotak mengalir semula dan menyusun semula apabila diperlukan, memberikan segala-galanya rupa yang lebih teratur.
Pertanyaan Media: Walaupun sebenarnya tidak ditulis di sini, cara elemen grid berkelakuan dengan saiz skrin yang berbeza menunjukkan konsep pertanyaan media dengan menggunakan sifat grid responsif.

Reka Letak Flexbox Responsif: Barisan Warna

Seterusnya, mari gunakan Flexbox untuk mencipta barisan kotak berwarna yang ringkas.

HTML untuk Reka Letak Flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Row</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="flex-container">
        <div class="flex-item" style="background-color: #FF5733;">1</div>
        <div class="flex-item" style="background-color: #33FF57;">2</div>
        <div class="flex-item" style="background-color: #3357FF;">3</div>
        <div class="flex-item" style="background-color: #FF33A1;">4</div>
    </div>
</body>
</html>

HTML:

Sama seperti contoh grid, HTML di sini mencipta bekas fleksibel dengan kotak item fleksibel yang memaparkan nombor berwarna.

CSS untuk Reka Letak Flexbox:

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    gap: 10px;
}

.flex-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

CSS:
The CSS here uses Flexbox properties to create a responsive layout that adapts to various screen sizes. The display: flex; in the .flex-container gives its child elements, or (flex items), Flexbox functionalities. The flex-wrap: wrap; property allows items to flow onto multiple lines if the container's width is exceeded. The justify-content: center; property centers the flex items along the main axis, so there is a balanced layout regardless of the number of items. The gap: 10px; property introduces uniform spacing between items, improving overall organization. Each .flex-item is also a flex container, using display: flex; to allow further alignment of its inner content, which is centered both vertically and horizontally using justify-content: center; and align-items: center;. The fixed dimensions of height: 100px; and width: 100px; provide uniformity, while the combination of these properties gives the layout a pleasant look while adapting to the needs of different devices.

Example of Responsive Web Design: Flexbox Layout

This flexbox layout demonstrates severalresponsive design characteristics.

Flex Wrapping: The flex-wrap: wrap; property makes boxes move to the next line when they can't fit in the row, adapting to different viewport widths.
Centered Items: Items remain centered regardless of the screen size, improving the overall presentation.
Fixed Dimensions: The boxes have a specific size, but they wrap and readjust based on the available space, allowing for a responsive layout.

Comparing CSS Grid and Flexbox

When it comes to layout design in CSS, Grid and Flexbox are both great choices, but they serve different purposes. CSS Grid is a two-dimensional layout system that allows you to create complex grid structures with rows and columns, making it ideal for layouts where precise control over both dimensions is required, such as in web applications or dashboards. On the other hand, Flexbox is a one-dimensional layout model that is best at distributing space along a single axis—either horizontally or vertically—making it perfect for simpler layouts or smaller components like buttons or navigation menus. While you might choose Grid for a comprehensive, structured layout where elements need to align across both axes, Flexbox would be your go-to for an adaptive, fluid layout that needs to respond to content size. In the end, your choice should depend on the specific needs of your project; often, using both together, complementarily, can give you the best results.

Conclusion

With CSS Grid and Flexbox, you can create adaptable layouts that look great on any device. These examples illustrate how straightforward it can be to implement dynamic designs.

Now it's your turn! Experiment with these techniques, modify the colors and layout settings, and see how simple it is to create fun and responsive designs.
``
sources:
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_grid.asp
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout
https://kinsta.com/blog/responsive-web-design/#4-flexbox-layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://blog.logrocket.com/css-flexbox-vs-css-grid/#:~:text=For%20a%20major%20layout%20style,helpful%20when%20working%20with%20rows.

Atas ialah kandungan terperinci Reka Bentuk Web Responsif dengan Grid CSS dan Flexbox. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html define if count for while auto using class Property number this history display overflow viewport background column flex https everything Access

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Mencipta Menu Navigasi Slaid Dalam dengan HTML, CSS dan JavaScriptArtikel seterusnya：Mencipta Menu Navigasi Slaid Dalam dengan HTML, CSS dan JavaScript

Artikel berkaitan

Lihat lagi