Css ile responsive site tasarimi nasil yapilir? - R10.net
  • 15-09-2020, 01:21:54
    #1
    CSS İLE RESPONSIVE SİTE TASARIMI NASIL YAPILIR?

    Yaşadığımız dönemde bütün web siteleri yapılırken, tasarım sırasında sitenin tüm ortamlara uyumlu olmasını sağlamak gerekmektedir. Tablet, telefon vb. gibi cihazlara uyumlu tasarlanmayan web sayfalarından bu gibi ortamlarda verim alınmamakta, kullanıcıya hitap etmemektedir. Böyle sayfaları responsive (her ekran boyutuna uyumlu) hale getirmek daha da zor olmaktadır. İyi bir web sayfası tasarım bölümünde responsive şekilde dizayn edilmelidir. CSS İLE RESPONSIVE SİTE TASARIMI NASIL YAPILIR?

    Öncelikle aşağıdaki bilgilere bir göz atalım.

    Media Özelliği

    Media özelliği Html sayfalarını projeksiyon cihazları, cep telefonları gibi, çok değişik ortamlarda görüntülenmesi hedeflenir. Bu özelliğin varsayılan değeri screen'dir. Birden fazla media belirtmek için "screen, print" şeklinde aralarına virgül konularak yazılabilir. Tanımlanan tiplerin içinde “all ” seçeneği bütün media türlerini içinde barındırır.
    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.
    tty : Teleks ortamları için. CSS3 ile gelen tanımlayıcı.
    speech : Ses sentezi yapan ortamlar için. CSS3 ile gelen tanımlayıcı.

    İlk olarak web sayfamıza gelen bir istemcinin ortamını belirlemek için meta viewport ayarı yapmamız gerekmektedir. Birinci meta ayarı viewport özelliğidir. Mobil cihazlarda optimize edilmiş görünümü elde edebilmek için aşağıdaki gibi bir tanımlama yapabiliriz. Bu kodu HTML'de <head></head> etiketleri arasına ekliyoruz.

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    Mobil cihazlarda enine görünümü belirlemek için tarayıcıya belli bir ölçek girilebilir. Aşağıdaki örnek bir web uygulaması için talep edilen bir yakınlaştırma sağlar. Yakınlaştırmayı engellemek için "user-scalable=no" tanımlanabilir.

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5 maxmum-scale=1.0" />
    Width piksel değeri alabilir. Örnek width = 320px olarak verilebilir. Aynı sonucu elde etmek için "width=device-width" yazılarak cihazın ekran genişliğini alması ayarlanabilir. Web sayfasını okuyan cihazın ekran genişliğine ulaşmasından sonra işimiz daha da kolaylaşmaktadır. Bundan sonra yapacağımız tek şey CSS dosyasında belirtilen ekran değerlerinde yapılması gerekenleri uygulayacağız. CSS dosyasına aşağıdakine benzer bir tanımlama yapıyoruz.

    @media only screen and (max-width: 960px) { }
    Bu tanımla ekran genişliğinin maksimum 960px olduğunda yapılması gerekenleri süslü parantezler içene yazıyoruz.
    @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 zaman sitenin 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öyleyebiliriz.
    ÖRNEK:
    @media only screen and (min-width: 480px) and (max-width: 759px) {
    #anadiv{ width:90%; height:30em; border:1px solid #000;}
    }
    Yukarıda bulunan tanımlama ekran çözünürlüğünün 481px ile 758px arasında ise parantez içerisindeki kodlar devreye girerek 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 yapıp, border özelliği verecektir. Bu sayede belirlenen ekran genişliklerine göre CSS kodlarımızı ekleyebiliriz.

    Bu uygulama aynı CSS dosyası içerisinde yapıldığı gibi dışardan da eklenebilmektedir. Mesela bir ekran çözünürlüğüne göre ayarlanan CSS dosyalarını çağırmayı hedefliyorsak aşağıdaki belirtilen gibi bir tanımlama yapmalıyız.

    <link rel="stylesheet" madia="handheld, only screen and (max-device-width:320px)" href="telefon.css" />
    Yukarıdaki tanımlama ekran genişliği 319px'e kadar telefon.css dosyasını çağıracaktır. Aşağıda belirtilen ise iki ekran genişliğinde çağırılacak CSS dosyasını belirtmektedir.

    <link rel="stylesheet" madia="only screen and (min-width:641px and (max-width:800px)" href="tablet.css" />
    Yukarıdaki tanımlama ile 641px ile 800px arasındaki ekran genişliklerinde tablet.css dosyasını çağıracaktır. Her iki yöntemi de belirttiğime göre şimde sadece hangi ekran çözünürlüğü hangi cihaza ait onu öğrenmemiz gerekmektedir.

    @media only screen and (min-width:990px) and (max-width:1230px) {
    /*BU TANIMLAMA MASA ÜSTÜ BİLGİSAYARLAR İÇİNDİR*/
    }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
    /*BU TANIMLAMA TABLETLER İÇİNDİR*/
    }
    @media only screen and (max-width: 479px) {
    /*BU TANIMLAMA TELEFONLAR İÇİNDİR*/
    }
    ÖRNEK UYGULAMA:

    Responsive sitemiz için önce CSS dosyamızı oluşturalım.

    dosya adı: css-responsive.css

    @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 etiketlerinin 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 etiketinin 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{
    
    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

    <!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 </p>
    <p>METİN ALANI </p>
    <p>METİN ALANI </p>
    
    </section>
    </article>
    <aside>
    
    </aside>
    </div>
    </div>
    <footer>
    
    </footer>
    </body>
    </html>
    CSS İLE RESPONSIVE SİTE TASARIMI NASIL YAPILIR? Sorusunun cevabı bu şekildedir. Sizler de artık CSS ile responsive site tasarımı yapabilirsiniz.
    OSLOTR İNTERNET HİZMETLERİ - 0264 502 4 804

  • 15-09-2020, 01:38:19
    #2
    Hocam çol yararlı bi içerik olmuş elinize sağlık
    Wordpress - Open cart -html eklenti, Kurulum vb işleriniz uygun fiyata yapılır.İletişim için P.m veya Whatsapp
  • 15-09-2020, 01:38:46
    #3
    "Responsive site için iki tane html kod verip width değerlerini yüzdelik yapman yeterli." Diyen arkadaşlara cevap niteliği taşıyan yararlı bir konu olmuş. Teşekkürler.
    https://www.guzel.net.tr/aff.php?aff=1224​​​​