Tabletlere ve bazı bilgisayarlara göre responsive tasarım nasıl yaplır
Arkadaşlar merhaba. Şimdi ben yaptığım siteyi reponsive olarak ayarlamaya çalışıyorum. Mesela kendi laptop'ıma göre tasarımı ayarlıyorum ve "min-width:1200px" veriyorum. Tabletlerin bazıları düzgün görünüyor, bazıları ise dağınık. Ama aynı tableti yan yatırdığımızda görüntü bozuluyor. Mesela ipad pro 10, nexus 10 da görüntü bozuluyor. Aynı şekilde bilgisayar için "1200px" veriyorum ama onlarda da aynı. Nasıl bir ayarlama yapmak lazım acaba.
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (7)
öncelıkle clearfix olusturmalısın burada guzel anlatımı var başka kaynaklarıda arastır.
https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix
height:165px; buraya
min-height:100px; dersen bosluklarda abartmaz
Arkadaşlar hizalama işlemlerini hallettim. Tek problemim resimde görüldüğü gibi "footer" ın altındaki büyük boşluklar. Genelde dikeyde çok çıkıyor bu boşluk. 100px; 200px; gibi. Mesela alttaki resim "ipad width:1024px"
https://hizliresim.com/JxsjFh
@media screen and (min-width: 992px) and (max-width: 1199px) {
.videomediaquery {
width:32.5%;
height:165px;
float:left;
margin-left:1.1%;
}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
.videomediaquery:first-child {
width:32.5%;
height:165px;
float:left;
margin-left:0%;
}
}
Arkadaşlar ben media query leri ayarlıyorum ama mesela iphone xr yan tutulduğu vakit görüntü bozuk çıkıyor. mesela iphone xr için dikey görünümde problem yok ama yan yatırdığımda sayfa bozuluyor. Ipad in bir cihazında dikeyde de yatayda da problem yok ama başka bir tabletin dikeyinde problem yok ama yatayında var. Aslında baktığım bir çok cihazda problem yok gibi ama kafamda çok karıştı.
kendım ogrenıp ccs kendım yazıcam dıyorsan
@media screen and (max-width: 1024px) { // burada max-width: 1024px yanı ekran boyutu 1024px e kadar sa bu kodu calıstır demek
css kodlarını bunun ıcıne yazacaksın
}
@media screen and (min-width: 750px) { // burada min-width: 750px yanı ekran boyutu 750px e kadar sa bu kodu calıstır demek
css kodlarını bunun ıcıne yazacaksın
}
burada standartlara gore kendın ayarlayacaksın mısal ustte arkadas yazmıs
AMA TAVSIYEM ARTIK SIFIRDAN CSS YAZMAK MANTIKSIZ BEN BUNU KULLANIYORUM HERSEYI KENDISI AYARLIYOR SEN YINE EKLEME CIKARMA VS YAPARSIN
Media Queries'lerini Bootstrap'a göre referans almak istersen...
xs < 576px
sm ≥ 576px
md ≥ 768px
lg ≥ 992px
xl ≥ 1200px
xxl ≥ 1400px
@media kullanarak yapabilirsin.
https://www.w3schools.com/css/css3_mediaqueries_ex.asp