HTML5 ve CSS3 Programlamaya AJAX'te Duyarlı Bir Mobil Site Nasıl Yapılacaktı - mankenler

HTML5 ve CSS3 web geliştiricileri, duyarlı bir mobil site yapmak için AJAX'ı kullanabilirler. Bir siteyi birden fazla çözünürlük üzerinde iyi çalışmanın bir yolu, algılanan ortam türüne göre farklı CSS kuralları sağlamaktır.

CSS3, bir ortam türünü belirlemenize ve ekranın çeşitli özelliklerini belirlemenize izin veren medya sorgusu, olarak adlandırılan muhteşem yeni bir özelliğe sahiptir. Tarayıcının belirli bir görüntü türü veya türü tespit ettiğinde, CSS'nin bir alt kümesini oluşturmak için bu belirtimi kullanabilirsiniz.

Bir ortam türü belirtin

@media kuralı, dahil edilen CSS'nin ne tür bir çıktıda değişiklik yapacağını belirlemenize izin verir. En yaygın medya türleri ekran, baskı, konuşma, avuç içi, projeksiyon ve tv'dir. Daha fazlası var, ancak sadece baskı ve ekran evrensel olarak destekleniyor.

Örneğin, kullanıcı belgeyi yazdırdığında aşağıdaki kod yazı tipi boyutunu belirleyecektir:

@media print {body {font-size: 10pt;}}

Bu CSS normal bir CSS'ye gömülebilir belgedir, ancak normal kurallara istisnalar koyduğu için belgenin sonuna yerleştirilmelidir. @media öğesinde istediğiniz kadar CSS kodu yerleştirebilirsiniz, ancak ilgilendiğiniz özel durumla alâkalı CSS kodunu koymalısınız.

Nasıl bir niteleyici eklenir

Medya türünü belirtirken ek olarak, @media kuralı çok daha güçlü bir numaraya sahiptir. Medyaya özel nitelikli koşul uygulayabilirsiniz.

Tarayıcı 500 pikstan daha geniş olduğunda, siyah bir metni beyaz arka planda görebilirsiniz. Ancak ekranı daraltın, ilginç bir şey görürsünüz.

Normalde bu hileyi düzeni değiştirmek için kullanırsınız, ancak bu basit renk değiştiren örnekle başlayın. İşte bu basit örnek için kod:

narrowBlack. html gövde {color: siyah; arka plan rengi: beyaz;} medya (maks. genişlik: 500 piksel) {gövde {renk: beyaz; background-color: black;}}

Niteleyici Demo
Bu sayfayı yeniden boyutlandırmayı deneyin. Sayfa 500 pikselden daha geniş olduğunda beyaz arka plan üzerine siyah metin gösterir.
Sayfa 500 pikülden daraldığında, renkler ters, siyah bir zeminde beyaz metin verir.

Ekran genişliğine uyan bir sayfa nasıl oluşturulur:

1. Sitenizi her zamanki gibi yapın.

   Bu, "düzenin ayrı bir içeriği" olan şeyin tamamının ödenmesini sağlayan bir yer. Aynı HTML'nin iki farklı stili olacaktır.

2. Normal bir şekilde bir CSS stili uygulayın.

   Standart stilinizi normal şekilde oluşturun - şimdilik, stili etikete sahip sayfaya katıştırın.Ana stiliniz en yaygın davayı işleyebilmelidir. (Genellikle, tam boyutlu bir masaüstü.)

3. Bir @ ortam kuralı oluşturun.

   @media CSS kuralı normal CSS'nin sonuna gitmelidir.

4. Bir max-width: 500px niteleyici belirleyin.

   Bu niteleyici, bu bölümdeki kuralların yalnızca ekranın genişliği 500 pikselden küçükse kullanılacağını belirtir.

5. Yeni stil setinin içine özel durum kuralları yerleştirin.

   Eğer niteleyici doğruysa, @ medya kuralı içerisinde tanımladığınız CSS kuralları etkinleştirilecektir. Mevcut CSS'yi geçersiz kılmak için bu kuralları kullanın. Unutmayın, her şeyi yeniden tanımlamak zorunda değilsiniz. Belli bağlamınızda mantıklı olan kuralları sağlayın.

6. Bir görüntü portası ekleyin.

   Mobil tarayıcılar bazen sayfanın yeniden ölçeklendirilmesine çalışılacak ve böylece hepsi aynı anda görülebilecek. Bu, özel bir stilin amacına ters düştüğünden, tarayıcının gerçek genişliğini bildirmesi gerektiğini belirtmek için görüntüleme meta etiketini kullanın. Gerekli olmaması gerektiği için sayfa ölçeklemeyi kapatmak genellikle yararlıdır.

Bu örnekte, tarayıcı ana metni (beyaz bir arka plan üzerine siyah metin) her zaman uygular. Sonra niteleyicinin doğru olup olmadığını görmek için @media kuralı inceliyor.

Genişlik 500 pikülden küçükse, max-width: 500px nitelenmesi true olarak değerlendirilir ve @media segmentinin tüm CSS kodu etkinleştirilir. Tarayıcı daha sonra her iki CSS setini de depolar ve kuralın durumuna göre doğru CSS'yi uygular.