`@media` ve Duyarlı Tasarım
Bu makale @media ve duyarlı tasarımı açıklar.
@media'nın temel sözdizimi ve kullanım örnekleriyle esnek düzenler oluşturmayı öğreneceksiniz.
YouTube Video
Önizleme için HTML
css-responsive-media.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-media.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>@media</h2>
20 </header>
21 <article>
22 <h3>@media Syntax</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26@media media-type and (condition) {
27 /* Styles applied when the media query is matched */
28}
29</pre>
30 </section>
31 </article>
32 <article>
33 <h3>@media Example : max-width</h3>
34 <section>
35 <header><h4>CSS</h4></header>
36<pre class="sample">
37@media screen and (max-width: 600px) {
38 body {
39 background-color: lightblue;
40 }
41 p {
42 font-size: 14px;
43 }
44}
45</pre>
46 </section>
47 </article>
48 <article>
49 <h3>@media Example : orientation</h3>
50 <section>
51 <header><h4>CSS</h4></header>
52<pre class="sample">
53@media screen and (orientation: landscape) {
54 body {
55 background-color: lightgreen;
56 }
57}
58</pre>
59 </section>
60 </article>
61 <article>
62 <h3>@media Example : min-width & max-width</h3>
63 <section>
64 <header><h4>CSS</h4></header>
65<pre class="sample">
66@media screen and (min-width: 768px) and (max-width: 1024px) {
67 body {
68 background-color: lightgray;
69 }
70}
71</pre>
72 </section>
73 </article>
74 <article>
75 <h3>@media Example : devices</h3>
76 <section>
77 <header><h4>CSS</h4></header>
78<pre class="sample">
79/* Mobile styles */
80@media screen and (max-width: 600px) {
81 body {
82 font-size: 14px;
83 }
84}
85
86/* Tablet styles */
87@media screen and (min-width: 601px) and (max-width: 1024px) {
88 body {
89 font-size: 16px;
90 }
91}
92
93/* Desktop styles */
94@media screen and (min-width: 1025px) {
95 body {
96 font-size: 18px;
97 }
98}
99</pre>
100 </section>
101 </article>
102 </main>
103</body>
104</html>@media Kuralları
@media, belirli koşullara göre stiller uygulamak için CSS medya sorgularını kullanma kuralıdır. Bu, cihaz ekran boyutu, yönlendirme, çözünürlük veya diğer özelliklere göre farklı CSS'lerin uygulanmasına olanak tanır. Genellikle duyarlı tasarım için kullanılır, masaüstü, tablet ve mobil gibi farklı cihazlarda görünümü ayarlamaya yardımcı olur.
Temel Sözdizimi
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}media-typeiçinde medya türünü belirtin (örneğin,screen,print).conditioniçinde ekran boyutu veya çözünürlük gibi koşulları belirtin.
Medya Türleri
- screen: Bilgisayarlar ve akıllı telefonlar gibi ekran görüntüsü için stiller.
- print: Yazdırma sırasında uygulanan stil budur.
- all: Tüm medyaya uygulanan stil budur.
Sık Kullanılan Koşullar
- min-width / max-width: Ekranın minimum/maksimum genişliğine göre stiller uygulayın.
- min-height / max-height: Ekranın minimum/maksimum yüksekliğine göre stiller uygulayın.
- orientation: Ekran yönünü belirtin (
portraitdikey,landscapeyatay için). - resolution: Ekran çözünürlüğüne göre stiller uygulayın (örneğin, DPI).
Örnek Kullanım
Ekran genişliğine bağlı stil değişiklikleri
Örneğin, ekran genişliği 600 pikseldense daha küçükken uygulanacak stilleri belirtmek için aşağıdaki gibi yazabilirsiniz:.
1@media screen and (max-width: 600px) {
2 body {
3 background-color: lightblue;
4 }
5 p {
6 font-size: 14px;
7 }
8}- Ekran genişliği 600 piksel veya daha az olan cihazlarda, arka plan rengi açık maviye döner ve paragraf yazı tipi boyutu 14px olur.
Ekran yönüne göre stiller
Cihaz yatay yöndeyken stilleri uygulamak için aşağıdaki gibi yazabilirsiniz:.
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- Ekran yatay moddayken, arka plan rengi açık yeşil olur.
3. Birden fazla koşulun birleştirilmesi örneği
Belirli koşullara stil uygulamak için birden fazla koşulu and ile birleştirebilirsiniz.
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- Ekran genişliği 768px ile 1024px arasında olduğunda, arka plan rengi açık griye değişir.
Uygulama Örneği: Duyarlı Tasarım
1/* Mobile styles */
2@media screen and (max-width: 600px) {
3 body {
4 font-size: 14px;
5 }
6}
7
8/* Tablet styles */
9@media screen and (min-width: 601px) and (max-width: 1024px) {
10 body {
11 font-size: 16px;
12 }
13}
14
15/* Desktop styles */
16@media screen and (min-width: 1025px) {
17 body {
18 font-size: 18px;
19 }
20}Duyarlı tasarımda, ekran genişliğine bağlı olarak farklı düzenler uygulamak yaygındır.
- Mobil cihazlarda (600px veya daha az), tabletlerde (601px ile 1024px arası) ve masaüstünde (1025px veya daha fazla) yazı tipi boyutları değişir.
Özet
@media, cihazlara ve ekran boyutlarına göre CSS stillerini değiştirmek için güçlü bir araçtır ve duyarlı tasarım için gereklidir. min-width ve max-width gibi koşulları ustalıkla kullanarak, çeşitli cihazlara uygun optimize edilmiş bir web sitesi oluşturabilirsiniz.
Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.