CSS'de Duyarlı Tasarıma Genel Bakış
Bu makale, CSS'te duyarlı tasarımın genel bir bakışını açıklar.
Duyarlı tasarımın temel kavramına ve CSS'in bunu uygulamadaki rolüne genel bir bakış sunacağız.
YouTube Video
Önizleme için HTML
css-responsive-overview.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-responsive-overview.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Responsive Design</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Responsive Design Related Properties</h2>
20 </header>
21 <article>
22 <h3>Media Queries</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26/* When the screen width is 600px or less */
27@media (max-width: 600px) {
28 body {
29 background-color: lightblue;
30 }
31}
32/* When the screen width is between 601px and 1200px */
33@media (min-width: 601px) and (max-width: 1200px) {
34 body {
35 background-color: lightgreen;
36 }
37}
38/* When the screen width is 1201px or more */
39@media (min-width: 1201px) {
40 body {
41 background-color: lightyellow;
42 }
43}
44</pre>
45 </section>
46 </article>
47 <article>
48 <h3>Fluid Layouts</h3>
49 <section>
50 <header><h4>CSS</h4></header>
51<pre class="sample">
52.container {
53 width: 80%; /* 80% width relative to the parent element */
54 margin: 0 auto; /* Center the element */
55}
56</pre>
57 </section>
58 </article>
59 <article>
60 <h3>Responsive Images</h3>
61 <section>
62 <header><h4>CSS</h4></header>
63<pre class="sample">
64img {
65 max-width: 100%;
66 height: auto;
67}
68</pre>
69 </section>
70 </article>
71 <article>
72 <h3>Viewport</h3>
73 <section>
74 <header><h4>HTML</h4></header>
75 <pre><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre>
76 </section>
77 </article>
78 <article>
79 <h3>CSS Frameworks</h3>
80 <section>
81 <header><h4>HTML</h4></header>
82<pre>
83<div class="container">
84 <div class="row">
85 <div class="col-md-6">Left content</div>
86 <div class="col-md-6">Right content</div>
87 </div>
88</div>
89</pre>
90 </section>
91 </article>
92 <article>
93 <h3>Flexbox & Grid Layout</h3>
94 <section>
95 <header><h4>CSS</h4></header>
96<pre class="sample">
97/* Flex Example */
98.container {
99 display: flex;
100 flex-wrap: wrap; /* Allow elements to wrap */
101}
102
103.item {
104 flex: 1 1 200px; /* Each item has a minimum width of 200px */
105}
106
107/* Grid Example */
108.container {
109 display: grid;
110 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
111 gap: 16px;
112}
113</pre>
114 </section>
115 </article>
116 </main>
117</body>
118</html>CSS'de Duyarlı Tasarıma Genel Bakış
CSS'de duyarlı tasarım, akıllı telefonlar, tabletler ve masaüstü bilgisayarlar gibi çeşitli cihazlarda ve ekran boyutlarında bir web sayfasının düzenini ve içeriğini uygun şekilde görüntüleme tekniğidir. Duyarlı tasarımı gerçekleştirmek için ağırlıklı olarak aşağıdaki teknikler ve yöntemler kullanılır.
Medya Sorguları
1/* When the screen width is 600px or less */
2@media (max-width: 600px) {
3 body {
4 background-color: lightblue;
5 }
6}
7/* When the screen width is between 601px and 1200px */
8@media (min-width: 601px) and (max-width: 1200px) {
9 body {
10 background-color: lightgreen;
11 }
12}
13/* When the screen width is 1201px or more */
14@media (min-width: 1201px) {
15 body {
16 background-color: lightyellow;
17 }
18}Medya sorguları, cihaz genişliği, yüksekliği, çözünürlüğü ve daha fazlasına göre farklı CSS kuralları uygulamanızı sağlayan bir özelliktir. Bu, ekran boyutuna bağlı olarak farklı stiller uygulanmasını sağlar.
Bu örnekte, arka plan rengi ekran genişliğine göre değişir.
Akıcı Düzenler
1.container {
2 width: 80%; /* 80% width relative to the parent element */
3 margin: 0 auto; /* Center the element */
4}Duyarlı tasarımda, öğelerin genişliği ve yüksekliği, mutlak piksel değerleri yerine yüzde veya em gibi göreli birimler kullanılarak belirtilir. Bu, düzenin ekran boyutuna göre esnek bir şekilde değişmesine olanak tanır.
Duyarlı Görseller
1img {
2 max-width: 100%;
3 height: auto;
4}Görseller, ekran boyutuna göre ölçeklendirilecek şekilde ayarlanır. Örneğin, max-width kullanmak, görsellerin üst elemanlarının genişliğini aşmamasını ayarlayabilir.
Görünüm Portu Ayarları
1<meta name="viewport" content="width=device-width, initial-scale=1.0">Tarayıcının cihazın ekran genişliğini doğru şekilde yorumlamasını sağlamak için HTML'de <meta> etiketini kullanın. Bu olmadan, duyarlı tasarım özellikle mobil cihazlarda düzgün çalışmaz.
CSS Çerçevelerinin Kullanımı
Bootstrap ve Tailwind CSS gibi CSS çerçeveleri, duyarlı tasarımı verimli bir şekilde gerçekleştirmek için sıklıkla kullanılır. Bu çerçeveler, önceden tanımlanmış sınıfları kullanarak kolayca duyarlı düzenler oluşturmak için tasarlanmıştır.
Örnek: Bootstrap'in Izgara Sistemi
1<div class="container">
2 <div class="row">
3 <div class="col-md-6">Left content</div>
4 <div class="col-md-6">Right content</div>
5 </div>
6</div>Yukarıdaki örnekte, ekran genişliği md olduğunda (orta boyut, genellikle 768px veya daha fazla), iki sütun yan yana düzenlenir, ancak daha dar ekranlarda dikey olarak düzenlenir.
Flexbox ve Izgara Düzeni
1/* Flex Example */
2.container {
3 display: flex;
4 flex-wrap: wrap; /* Allow elements to wrap */
5}
6
7.item {
8 flex: 1 1 200px; /* Each item has a minimum width of 200px */
9}
10
11/* Grid Example */
12.container {
13 display: grid;
14 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
15 gap: 16px;
16}CSS flexbox veya grid kullanarak, esnek düzen ayarlamaları yapılabilir. Bu düzen teknikleri, ekran boyutuna göre düzenlerin otomatik olarak ayarlanmasını kolaylaştırdığından, duyarlı tasarım (responsive design) için oldukça uygundur.
Özet
Duyarlı tasarım, kullanıcıların kullandıkları cihaza bakılmaksızın web sitelerini rahatça görüntüleyebilmelerini sağlamak için önemli bir yöntemdir. Medya sorguları, esnek düzenler, çerçeveler ve Flexbox ve Grid gibi yeni düzen teknolojilerini bir araya getirerek daha esnek ve uyumlu web sayfaları oluşturmak mümkündür.
Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.