LARAVEL
SASS
CSS İLE RESPONSIVE SİTE TASARIMI
Çağımızda bütün web siteleri inşa edilirken, tasarım esnasında sitenin tüm ortamlara uyunluluğunuda sağlanmak gerekmektedir. Tablet, telefon vb. gibi ekranlara uyumluluğu sağlanamadan oluşuturulan web sayfalarından bu gibi ortamlarda verim alınmamakta, kullanıcıyı hitap etmekmektedir. Tekrar böyle sayfaları responsiv (Yani her ekran boyutuna göre görüntülenebilir) hale getirmek dahada zor olmaktadır. İyi bir web sayfası tasarım aşamasında responsiv şekilde inşa edilmelidir. Peki bu nasıl olacak.
Öncelikle aşağıdaki bilgilere bir göz atalım.
Media Özelliği
Media özelliği stil direktiflerinin hingi ortamda görüntü sağlayacağını belirler. Html sayfalarını projeksiyon cihazları, cep telefonları gibi, çok değişik ortamlarda görüntülenmesi amaçlanmaktadır. Bu özelliğin varsayılan değeri screen dır. Birden falza media seçeneği için screen, print şeklinde aralarına virgül konularak belirtilebilir. Tanımlanan tiplerin içinde “all” seçeneği bütün media tiplerini kapsar.
screen : Bilgisayar Ekranı için
tv : Televizyon ortamları için
projection : Projeksiyon sunumu için
handheld : El bilgisayarı ortamı için
aural : Ses sentezi yapan ortamlar için.
all : Tüm ortamlar için.
embossed : Braille yazıcı için.CSS3 ile gelen tanımlayıcı.
tty : Teleks ortamları için. CSS3 ile gelen tanımlayıcı.
speech : Ses sentezi yapan ortamlar için. CSS3 ile gelen tanımlayıcı.
Web tarayıcılar media tanımlayıcılarının hepsini henüz desteklememektedir.Bütün web tarayıcıları screen, print, ve all seçeneklerini destekleidiği için bu seçenekler kullanılır.
Öncelikle web sayfamıza gelen bir istemcinin ortamını öğrenmek için meta viewport ayarı yapmamız gerekmektedir. İlk meta ayarı (ve en sık kullanacağımız bir) viewport özelliğidir. Mobil cihazlarda optimize edilmiş görünümü ayarlamak için aşağıdaki gibi bir tanımlama yapabiliriz. Bu kodu htmlde <head></head> etiketleri arasına yazıyoruz.
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> |
Mobil cihazların enine görünüm ayarlamak için tarayıcıya belli bir ölçek verilebilir. Aşağıdaki örnek bir web uygulaması için arzu edilen bir yakınlaştırma sağlar. Yakınlaştırmayı engellemek için user-scalable=no veya belirli bir seviye tanımlanabilir.
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5 maxmum-scale=1.0" /> |
width piksel değeri alabilir. Örn widtt=320px olarak verilebilir. Aynı sonucu elde etmek için width=device-width yazılarak aygıtın ekran genişliğini alması sağlanabilir. Web sayfasını okuyan cihazın ekran genişliğini aldıktan sonra ise işimiz dahada kolaylaşmaktadır. Bu saaten sonra yapacağımız tek şey css dosyasında belirtilen ekran değerlerinde yapılması gerekenleri yazacağız. CSS dosyasına aşağıdaki gibi bir tanımlama yapıyoruz.
1 | @media only screen and (max-width: 960px) { } |
Bu tanımla eknran genişliğnin maksimum 960px olduğunda yapılması gerekenleri süslü parantezler içene yazıyoruz.
1 2 3 | @media only screen and (max-width: 960px) { #anadiv{ width:100%; height:10em; border:none;} } |
Yukarıdaki kod ekran çözünürlüğü 960px den küçük olduğu durumda sitenin bulunduğu anadiv ‘in genişliğini 100% yaparaka yani tüm ekranı kaplayarak içeriğin daha iyi bir şekilde sunulmasını sağlayacaktır. Bu şekilde tek bir ekran genişliği verildiği gibi iki ekran genişliği arasında yapılması gerekenleride sıralayabilir.
ÖRN:
1 2 3 | @media only screen and (min-width: 480px) and (max-width: 759px) { #anadiv{ width:90%; height:30em; border:1px solid #000;} } |
Yukarıdaki tanımlama ekran çözünürlüğünün 481px ile 758px arasında ise parantez içerisindeki kodlar devreye girecek daha önce anadiv için tanımlamış olduğumuz değerlerden sadece (width:90%;) genişliğini değiştirip yüksekliğini (height:30em) 30em yacpacak ve border özelliği verecektir. Bu sayede belirlenen ekran genişliklerine göre css kodlarımızı yazabiliriz.
Bu uygulama aynı css dosyası içerisinde yapıldığı gibi dışardan da dahil edilebilmektedir. Mesela bir ekran çözünürlüğüne göre belirtilen css dosyalarını çağırmasını istiyorsak aşağıdaki gibi bir tanımlama yapmalıyız.
1 | <link rel="stylesheet" madia="handheld, only screen and (max-device-width:320px)" href="dokumatiktelefon.css" /> |
Yukarıdaki tanımlama ekran genişliği 319px e kadar dokunmaktiktelefon.css dosyasını çağıracaktır. Aşağıda ise belirtilen iki ekran genişliğinde çağırılacak css dosyasını belirtmektedir.
1 | <link rel="stylesheet" madia="only screen and (min-width:641px and (max-width:800px)" href="ipad.css" /> |
Yukarıdaki tanımlama ile 641 px ile 800px arasındaki ekran genişliklerinde ipad.css dosyasını çağıracaktır. Her iki yöntemide belirtiğimize göre şimde sadece hangi ekran çözünürlüğü hangi cihaza ait onu bilmemiz gerekmektedir.
1 2 3 4 5 6 7 8 9 10 11 | @media only screen and (min-width:990px) and (max-width:1230px) { /*BU TANIMLAMA MASA ÜSTÜ BİLGİSAYARLAR İÇİN GEÇERLİDİR*/ } @media only screen and (min-width: 480px) and (max-width: 767px) { /*BU TANIMLAMA TABLETLER İÇİN GEÇERLİDİR*/ } @media only screen and (max-width: 479px) { /*BU TANIMLAMA TELEFONLAR İÇİN GEÇERLİDİR*/ } |
ÖRNEK UYGULAMA:
Responsiv sitemiz için önce css dosyamızı oluşuturlarım.
dosya adı: css-son-ders.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | @charset "utf-8"; /* CSS Document */ body{padding:0;margin:0;} header{ box-sizing: border-box; width:100%; background:rgba(204,204,204,0.5); border:1px solid #999; height:auto; } nav{ box-sizing: border-box; width:90%; margin:0 auto; background:rgba(0,204,255,0.5); padding:0px; height: 2.5em; overflow:hidden; } #banner{ box-sizing: border-box; width:90%; margin:0 auto; background:rgba(0,204,255,1); padding:10px; height:8em; } #content{ width:100%; background:rgba(204,204,204,0.1); border:1px solid #999; margin:0px; padding:0px; } #orta{ box-sizing: border-box; position:relative; height:auto; width:90%; margin:0 auto; background:rgba(0,204,0,0.2); overflow:hidden; } article{ height:35em; background:rgba(0,102,204,1); width:80%; float:left; } aside{ height:35em; background:rgba(153,0,0,1); width:20%; float:right; } footer{ height:10em; background:rgba(255,204,51,0.5); width:100%; } ul#menu{ list-style:none;/*Liste özelliklerinin tamamını sıfırladık.*/ margin:0px;/*Dış boşluğu sıfırladık.*/ padding:0px;/*İç boşluğu sıfırladık.*/ } ul#menu li{ display:inline;/*Listelemeyi alt alta yerine yan yana olmasını istedik.*/ cursor:pointer;/*Fare üzerine gelince el işareti belirecek.*/ float:left;/*li elemanlarını sol tarafa yasladık.*/ border-top:5px solid hsla(120,100%,33%,1);/*Li etiketlerinin üstine bir border ekledik*/ border-bottom:1px dashed hsla(120,100%,33%,1);/*Li etikelerinin altına kesik çizgili bir border ekledik.*/ margin:0px 0.3em;/*li etiketlerinin sağ sol boşluklarını 0.3 em yaptık.*/ padding:0.3em 1em 0.3em 0.3em;/*li etiketlerinin iç boşluklarını ayarladık.*/ text-align:left;/*li etiketlerin metin içeriğini sola yasladık.*/ background-color:hsla(0,0%,100%,1);/*li etikelerinin arka planını beyaz yaptık.*/ } ul#menu li a{ text-decoration:none;/*a etiketinin alt çizgisini kaldırdık.*/ color:hsla(120,100%,33%,1);/*a etikentinin metin renginin değiştirdik.*/ font-weight:bold;/*a etiketinin metin kalınlığını artırdık.*/ } ul#menu li:hover,ul#menu li:hover a{ /*ul elementinin li etiketini ve a etiketine fare üzerine geldiğinde özelliği ekledik.*/ color:hsla(0,100%,37%,1);/*Meti rengi kırmızı olacak*/ border-color:hsla(0,100%,37%,1);/*Kenarlık renkleri kırmızı olacak.*/ border-top-width:8px;/*Üst kenarlık genişliği 8px olacak.*/ } @media only screen and (min-width:0px) and (max-width:750px){ nav:hover{ height:auto;} ul#menu { height:1.8em; overflow:hidden; padding-top:10px;text-align:center;background:#333; color: #030;} ul#menu:before{ content:"MENU"; margin:10px; line-height:30px; color:white;} ul#menu:hover:before{ content:""; padding:0px; margin:0px; background-color:#600;} ul#menu:hover{z-index:100; height:auto; padding-top:0px;} ul#menu li{ display:block; width:100%; text-align:center; } } @media only screen and (min-width: 0px) and (max-width: 479px) { article{ width:100%;} aside{ width:100%;} #orta{ width:100%;} #banner{ width:100%;} nav{ width:100%;} } |
Sonra HTML sayfamızı oluşturalım.
Dosya adı: index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css-son-ders.css" /> <title>Untitled Document</title> <style> </style> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> </head> <body> <header> <div id="banner"></div> <nav> <div id="menutop"> <ul id="menu"> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> <li>Element 4</li> <li>Element 5</li> <li>Element 6</li> <li>Element 7</li> </ul> </div> </nav> </header> <div id="content"> <div id="orta"> <article> <section> <p>METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI </p> <p>METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI </p> <p>METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI METİN ALANI </p> </section> </article> <aside> </aside> </div> </div> <footer> </footer> </body> </html> |