Ekrana göre css ayarlamak @media css

Ekrana göre css ayarlamak @media css

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.

Bu makale ne kadar yararlı oldu?

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

As you found this post useful...

Follow us on social media!

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

Makale hakkındaki görüşler;

Aklına takılanları sor..

BU MAKALE İLE İLGİLİ

Kurumsal Sosyal Medya Yönetimi Nedir?