24-11-2015, 17:54
Merhaba arkadaşlar,
Ekran çözünürlüğüne göre nasıl CSS oluşturabileceğimize ilişkin küçük bir örnek hazırladım.
Ekran çözünürlüğüne göre CSS uygulamak için @media komutundan faydalanabiliriz.
Örnek HTML dosyası (index.html);
CSS Dosyamız(index.css);
Örneğimizde ekran genişliği küçüldükçe yazımızın arkaplan rengi değişecektir. Yani Bilgisayarda gözüken arkaplan rengiyle, tablette ve telefonda gözüken arkaplan rengi aynı olmayacaktır. Tabi bu sadece mantığını kavramak için bir örnek... Siz ihtiyaca göre istediğiniz gibi tasarımlar yapıp, kullanabilrsiniz.
* Dikkat, link rel="stylesheet" ile sayfaya css dosyamızı eklerken media="all" seçeneğini de eklememiz gerekmektedir...
Ekran çözünürlüğüne göre nasıl CSS oluşturabileceğimize ilişkin küçük bir örnek hazırladım.
Ekran çözünürlüğüne göre CSS uygulamak için @media komutundan faydalanabiliriz.
Örnek HTML dosyası (index.html);
Kod:
<!Doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ekran Çözünürlüğüne Göre CSS Denemesi</title>
<link rel="stylesheet" type="text/css" media="all" href="index.css" />
</head>
<body>
<div class="stilim" style="width:%100">www.turkishcode.com</div>
<br>
<div class="KucukEkrandaGizle">Bu metin küçük ekranlarda gözükmeyecek...</div>
</body>
</html>CSS Dosyamız(index.css);
Kod:
.stilim
{
background-color:red;
padding:10px;
border:1px solid #333;
}
@media only screen and (max-width:1230px) and (min-width:990px){
.stilim
{
background-color:blue;
}
}
@media only screen and (min-width: 480px) and (max-width: 990px) {
.stilim
{
background-color:yellow;
}
}
@media only screen and (max-width: 479px) {
.stilim
{
background-color:green;
}
.KucukEkrandaGizle{
visibility:hidden;
}
}Örneğimizde ekran genişliği küçüldükçe yazımızın arkaplan rengi değişecektir. Yani Bilgisayarda gözüken arkaplan rengiyle, tablette ve telefonda gözüken arkaplan rengi aynı olmayacaktır. Tabi bu sadece mantığını kavramak için bir örnek... Siz ihtiyaca göre istediğiniz gibi tasarımlar yapıp, kullanabilrsiniz.
* Dikkat, link rel="stylesheet" ile sayfaya css dosyamızı eklerken media="all" seçeneğini de eklememiz gerekmektedir...