CSS @medya Kuralı
Örnek
Tarayıcı penceresi 600 piksel veya daha az olduğunda, <body> öğesinin arka plan rengini "açık mavi" olarak değiştirin:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Kural @media
, medya sorgularında farklı medya türleri/cihazları için farklı stiller uygulamak için kullanılır.
Medya sorguları, aşağıdakiler gibi birçok şeyi kontrol etmek için kullanılabilir:
- görünüm alanının genişliği ve yüksekliği
- cihazın genişliği ve yüksekliği
- yönlendirme (tablet/telefon yatay mı yoksa dikey modda mı?)
- çözüm
Medya sorgularını kullanmak, masaüstü bilgisayarlara, dizüstü bilgisayarlara, tabletlere ve cep telefonlarına uyarlanmış bir stil sayfası (duyarlı web tasarımı) sunmak için popüler bir tekniktir.
Belirli stillerin yalnızca yazdırılan belgeler veya ekran okuyucular (ortam türü: yazdırma, ekran veya konuşma) için olduğunu belirtmek için ortam sorgularını da kullanabilirsiniz.
Medya türlerinin yanı sıra medya özellikleri de vardır. Medya özellikleri, kullanıcı aracısının veya görüntüleme cihazının belirli bir özelliğini test etmeye izin vererek medya sorguları için daha spesifik ayrıntılar sağlar. Örneğin, stilleri yalnızca belirli bir genişlikten daha büyük veya daha küçük olan ekranlara uygulayabilirsiniz.
Tarayıcı Desteği
Tablodaki sayılar, @media kuralını tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Property | |||||
---|---|---|---|---|---|
@media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS Sözdizimi
@media not|only mediatype and (mediafeature and|or|not
mediafeature) {
CSS-Code;
}
not , only and and and anahtar kelimelerinin anlamı :
not: not anahtar sözcüğü, tüm medya sorgusunun anlamını tersine çevirir.
yalnızca: Tek anahtar sözcük, medya özelliklerine sahip medya sorgularını desteklemeyen eski tarayıcıların belirtilen stilleri uygulamasını engeller. Modern tarayıcılar üzerinde hiçbir etkisi yoktur.
ve: ve anahtar sözcüğü, bir ortam özelliğini bir ortam türü veya diğer ortam özellikleriyle birleştirir.
Hepsi isteğe bağlıdır. Ancak, not veya only kullanıyorsanız , bir ortam türü de belirtmelisiniz.
Farklı ortamlar için aşağıdaki gibi farklı stil sayfalarınız da olabilir :
<link rel="stylesheet" media="screen and (min-width:
900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width:
600px)" href="smallscreen.css">
....
Medya Türleri
Value | Description |
---|---|
all | Default. Used for all media type devices |
Used for printers | |
screen | Used for computer screens, tablets, smart-phones etc. |
speech | Used for screenreaders that "reads" the page out loud |
Medya Özellikleri
Value | Description |
---|---|
any-hover | Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
any-pointer | Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
aspect-ratio | The ratio between the width and the height of the viewport |
color | The number of bits per color component for the output device |
color-gamut | The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4) |
color-index | The number of colors the device can display |
grid | Whether the device is a grid or bitmap |
height | The viewport height |
hover | Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
inverted-colors | Is the browser or underlying OS inverting colors? (added in Media Queries Level 4) |
light-level | Current ambient light level (added in Media Queries Level 4) |
max-aspect-ratio | The maximum ratio between the width and the height of the display area |
max-color | The maximum number of bits per color component for the output device |
max-color-index | The maximum number of colors the device can display |
max-height | The maximum height of the display area, such as a browser window |
max-monochrome | The maximum number of bits per "color" on a monochrome (greyscale) device |
max-resolution | The maximum resolution of the device, using dpi or dpcm |
max-width | The maximum width of the display area, such as a browser window |
min-aspect-ratio | The minimum ratio between the width and the height of the display area |
min-color | The minimum number of bits per color component for the output device |
min-color-index | The minimum number of colors the device can display |
min-height | The minimum height of the display area, such as a browser window |
min-monochrome | The minimum number of bits per "color" on a monochrome (greyscale) device |
min-resolution | The minimum resolution of the device, using dpi or dpcm |
min-width | The minimum width of the display area, such as a browser window |
monochrome | The number of bits per "color" on a monochrome (greyscale) device |
orientation | The orientation of the viewport (landscape or portrait mode) |
overflow-block | How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4) |
overflow-inline | Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4) |
pointer | Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
resolution | The resolution of the output device, using dpi or dpcm |
scan | The scanning process of the output device |
scripting | Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4) |
update | How quickly can the output device modify the appearance of the content (added in Media Queries Level 4) |
width | The viewport width |
Daha fazla örnek
Örnek
Tarayıcının genişliği 600 piksel veya daha az olduğunda bir öğeyi gizleyin:
@media screen and (max-width: 600px) {
div.example {
display:
none;
}
}
Örnek
Görüntü alanı 800 piksel genişliğinde veya daha genişse arka plan rengini lavanta olarak, görüntü alanı 400 ile 799 piksel arasındaysa açık yeşil olarak ayarlamak için medya sorgularını kullanın. Görüntü alanı 400 pikselden küçükse, arka plan rengi açık mavidir:
body {
background-color: lightblue;
}
@media screen and (min-width:
400px) {
body {
background-color: lightgreen;
}
}
@media
screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
Örnek
Duyarlı bir gezinme menüsü oluşturun (büyük ekranlarda yatay ve küçük ekranlarda dikey olarak görüntülenir):
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Örnek
Duyarlı bir sütun düzeni oluşturmak için medya sorgularını kullanın:
/* On screens that are 992px wide or less, go from four columns to two
columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack
on top of each other instead of next to each other */
@media screen and (max-width:
600px) {
.column {
width: 100%;
}
}
Örnek
Duyarlı bir web sitesi oluşturmak için medya sorgularını kullanın:
Örnek
Medya sorguları, tarayıcının yönüne bağlı olarak bir sayfanın düzenini değiştirmek için de kullanılabilir. Yalnızca tarayıcı penceresi yüksekliğinden daha geniş olduğunda uygulanacak bir dizi CSS özelliğine sahip olabilirsiniz, buna "Yatay" yönlendirme denir.
Yönlendirme yatay moddaysa açık mavi bir arka plan rengi kullanın:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Örnek
Belge ekranda görüntülendiğinde metin rengini yeşil ve yazdırıldığında siyah olarak ayarlamak için medya sorgularını kullanın:
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
Örnek
Virgülle ayrılmış liste : virgül kullanarak zaten var olana ek bir medya sorgusu ekleyin (bu, VEYA operatörü gibi davranacaktır):
/* When the width is between 600px and 900px OR above 1100px - change the
appearance of <div> */
@media screen and (max-width: 900px) and
(min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
İlgili Sayfalar
CSS Eğitimi: CSS Medya Sorguları
CSS Eğitimi: CSS Medya Sorguları Örnekleri
RWD Eğitimi: Medya Sorgularıyla Duyarlı Web Tasarımı
JavaScript Eğitimi: window.matchMedia() yöntemi