Ekrana göre css ayarlamak @media css


5
(1)

Hikaye: 

Merhaba arkadaşlar bir site yapacağım ve şöyle bir sorunum var: Menüye yukarıdan 70px boşluk uyguluyorum ve bilgisayarımda sorunsuz oluyor fakat farklı boyuttaki ekranda bozuk gözüküyor. İsteğim her bilgisayarda uygun görüntü göstermek. 

Çözüm:

@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
#kutu1{ margin-top: 10px; }
}

@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
#kutu1{ margin-top: 8px; }
}

@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
#kutu1{ margin-top: 5px; }
}
@media only screen and (max-width: 320px) {
#kutu1{ margin-top: 2px; }
}

4 farklı boyutta responsive CSS yaparak sorunu halledebilirsin. Dilerseniz (min-width: 321px) and (max-width: 1024px) oranlarını değiştirerek istediğiniz ekranlara özel görüntüler oluşturabilirsiniz.

Benimle etkileşime geç

Yazıyı değerlendirmek için yıldızlara tıklayabilirsin!

Makalenin yararlı olmamasına üzgünüm!

Bana bu yayını nasıl geliştirebileceğimi söyler misin?

BU NOT İLE ALAKALI

WordPress “Eklenti Ekle” Butonu Gözükmüyor Sorun Çözümü