Der ultimative Leitfaden zur Responsive Web-Entwicklung
Oct 05, 2024 am 06:18 AMpengenalan
Begini cara anda boleh memastikan reka bentuk anda kekal fleksibel dan kelihatan hebat pada mana-mana peranti. Mari kita lihat perkara utama yang perlu dipertimbangkan semasa membuat aplikasi web responsif.
Unit CSS
CSS menawarkan pelbagai unit, cukup sehingga kadangkala boleh mengelirukan untuk memilih yang betul.
- px: Unit berasaskan piksel kekal sama tanpa mengira saiz skrin.
- %: Unit berasaskan peratusan adalah relatif kepada saiz elemen induknya.
- vw dan vh: Unit berasaskan lebar/tinggi viewport adalah relatif kepada lebar/tinggi viewport.
- dvw dan dvh: Unit lebar dan ketinggian port pandangan dinamik adalah serupa dengan vw dan vh, tetapi ia melaraskan secara dinamik untuk perubahan dalam port pandangan, iaitu apabila papan kekunci pada skrin muncul.
- rem: Berbanding saiz fon elemen akar, menawarkan asas yang konsisten untuk penskalaan.
- em: Berbanding dengan saiz fon elemen semasa, berguna untuk penskalaan dalam komponen.
- calc(): Fungsi yang membolehkan anda melakukan pengiraan dengan unit yang berbeza. Contohnya, calc(100% - 20px) boleh membantu mencampurkan unit relatif dan mutlak.
Untuk senarai lengkap unit CSS (walaupun banyak yang jarang digunakan), lihat halaman Dokumen Web MDN ini.
Imej Responsif
Terdapat beberapa cara untuk meningkatkan responsif imej anda di web.
Menggunakan lebar dan tinggi: auto
Dengan menetapkan had lebar dan ketinggian maksimum kepada auto, kami boleh menjadikan imej kami responsif tanpa mengubah nisbah bidang imej.
img { width: 100%; /* or any fixed width */ height: auto; }
Gunakan lebar maks dan bukannya lebar jika anda mahu imej dikecilkan, tetapi jangan sekali-kali dinaikkan lebih besar daripada saiz asalnya.
Menggunakan elemen img dan srcset
Bagaimana jika anda memerlukan versi yang berbeza bagi imej yang sama untuk saiz atau resolusi port pandangan yang berbeza? <img> tag dengan atribut srcset membolehkan penyemak imbas memilih imej yang paling sesuai untuk peranti secara automatik.
Sila ambil perhatian bahawa versi yang berbeza tidak bermaksud fail yang sama tetapi imej yang telah dilaraskan (cth., saiz semula, dimampatkan) agar sesuai dengan peranti yang berbeza.
<img src="small.jpg" srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w" sizes="(max-width: 600px) 100vw, (min-width: 601px) and (max-width: 1200px) 75vw, (min-width: 1201px) 50vw" alt="Example Image">
- Jika lebar port pandangan ialah 600px atau kurang, penyemak imbas akan menggunakan small.jpg dengan lebar 100vw. Penyemak imbas juga akan menggunakan small.jpg sebagai imej sandaran.
- Jika lebar port pandangan adalah antara 601px dan 1200px, penyemak imbas akan menggunakan medium.jpg dengan lebar 75vw.
- Untuk mana-mana lebar port pandangan melebihi 1200px, penyemak imbas akan menggunakan large.jpg dengan lebar 50vw.
Menggunakan elemen gambar dan srcset
Bagaimana jika anda memerlukan imej yang berbeza untuk saiz atau resolusi port pandangan yang berbeza? <gambar> elemen dengan atribut srcset membolehkan anda mentakrifkan imej yang berbeza untuk saiz atau resolusi port pandangan yang berbeza.
<picture> <source srcset="small.jpg" media="(max-width: 600px)"> <source srcset="medium.jpg" media="(max-width: 1200px)"> <img src="large.jpg" alt="Example image"> </picture>
Dalam contoh ini:
- Jika lebar port pandangan ialah 600px atau kurang, penyemak imbas akan menggunakan small.jpg.
- Jika lebar port pandangan adalah antara 601px dan 1200px, penyemak imbas akan menggunakan medium.jpg.
- Untuk mana-mana lebar port pandangan melebihi 1200px, penyemak imbas akan menggunakan large.jpg.
Tipografi responsif
Unit relatif
html { font-size: 16px; } .parent { font-size: 2rem; /* 32px (2 * 16px) */ } .child { font-size: 0.5em; /* 16px (0.5 * 32px) */ }
Unit em adalah relatif kepada saiz fon elemen induk. Dalam contoh di atas, kelas kanak-kanak mempunyai saiz fon 16px kerana ia adalah separuh daripada saiz fon elemen induk, iaitu 32px.
Unit rem adalah relatif kepada saiz fon elemen akar (html). Dalam contoh di atas, kelas induk mempunyai saiz fon 32px kerana ia adalah dua kali saiz fon akar, iaitu 16px.
Unit berasaskan viewport
h1 { font-size: 5vw; } h2 { font-size: 5vh; }
- Unit vw adalah relatif kepada lebar port pandangan.
- Unit vh adalah relatif kepada ketinggian port pandangan.
Fungsi pengapit
Bagaimana jika anda perlu menggunakan unit relatif atau berasaskan port pandang tetapi dalam had minimum dan maksimum?
Sebagai contoh, saya mahu saiz fon saya relatif kepada lebar viewport, tetapi nilai minimum hendaklah 12px dan nilai maksimum hendaklah 48px. Fungsi pengapit ialah pilihan ideal untuk senario sedemikian.
h1 { font-size: clamp(12px, 3vw, 48px); }
Reka letak responsif
Flexbox
Bagaimana jika anda perlu menyelaraskan item terutamanya dalam reka letak satu dimensi? (baris atau lajur)
<div class="card-container"> <div class="card">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> </div>
.card-container { display: flex; /* Enable flexbox layout */ justify-content: space-around; /* Space evenly between and around cards */ } .card { background-color: black; border: 1px solid white; color: white; text-align: center; padding: 20px; }
Baca lebih lanjut mengenai Flexbox di sini
Grid
Bagaimana jika anda perlu menyelaraskan item terutamanya dalam reka letak dua dimensi? (baris dan lajur)
<div class="card-container"> <div class="card">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> <div class="card">Card 4</div> </div>
.card-container { display: grid; /* Enable grid layout */ grid-template-columns: 1fr 1fr; /* Two equal columns */ grid-template-rows: 1fr 1fr; /* Two equal rows */ gap: 10px; /* Space between grid items */ width: 100%; /* Full width of the container */ } .card { background-color: black; border: 1px solid white; color: white; text-align: center; padding: 20px; }
Baca lebih lanjut tentang Grid di sini
Pertanyaan Media
Bagaimana jika anda ingin menggunakan gaya tertentu apabila peranti memenuhi syarat tertentu? Selalunya, keadaan ini berkaitan dengan lebar peranti.
<div class="card-container"> <div class="card">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> </div>
.card-container { display: flex; flex-direction: column; /* Default: single-column layout */ } /* Media query for tablet devices (min-width: 768px) */ @media (min-width: 768px) { .card-container { flex-direction: row; /* Change to two-column layout */ } .card { flex: 1; /* Equal width for all cards */ } } /* Media query for desktop devices (min-width: 1024px) */ @media (min-width: 1024px) { .card { flex: 25%; /* Each card takes 25% of the width */ } }
Media queries can also be used with other characteristics, such as height, orientation, aspect-ratio, resolution, pointer, prefers-color-scheme, and display-mode.
Viewport Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tag is responsible for giving instructions to the browser on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen width and initial-scale=1.0, which controls the zoom level when the page is first loaded.
Responsive frameworks and component libraries
If you don't want to reinvent the wheel, there are many responsive frameworks available to save time and effort.
Bootstrap: A widely used framework with pre-designed components for quick responsive site development.
Tailwind CSS: A utility-first framework that enables fast custom design with utility classes.
MUI: A React library based on Material Design, offering responsive pre-styled components.
ShadCN: Focuses on modern, accessible, and customizable responsive components.
Ant Design: A comprehensive design system by Alibaba for enterprise applications, featuring responsive components.
Designing with a Mobile-First Approach
A mobile-first approach means starting with the design for smaller screens, like smartphones, and then gradually adding more features for larger screens, like tablets and desktops. This way, we ensure that the basic experience works great on mobile, and then you build on that for bigger devices.
.card-container { /* default code is for mobile view */ display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; padding: 20px; gap: 12px; } @media (min-width: 768px) { /* queries/cases are for larger views */ .card-container { flex-direction: row; gap: 18px; } }
Das obige ist der detaillierte Inhalt vonDer ultimative Leitfaden zur Responsive Web-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework

Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte)

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang

Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices

Datei hochladen mit Multer in node.js und ausdrücken
