STYLING
Basit Bir Hesap Makinesi Nasıl Responsive Yapılır ?
Basit hesap makinesinin styling yapmıştık. Şimdi de farklı farklı platformlar için Responsive olmasını sağlamaya çalışacağız.
Öncelikle örneğin linkini vereyim. (https://onurdayibasi.dev/simple-calculator)
Responsive: Web sayfanıza veya uygulamanızda farklı farklı cihazlardan girdiğimizde değişen ekran boyutlarına göre uygulamanızın farklılaşarak, ekran koşullarına göre şekillenmesidir.
Peki farklı, farklı plarformlardan kasıt ne ? . Bu konuda CSS-Tricks sayfasının “Media Queries for Standard Devices” 99 farklı cihaz için Viewport analizi yapmışlar ve bu analizlerden çok farklı büyüklüklerde, pixel ratiolarda aygıt olduğunu ve bu aygıtları (mobil cihazları) kullanıcılar Landscape ve Portrait (yatay ve dikey)olarak kullanabildiklerini görürsünüz.
Tabi bu cihaz sayısının 99 ve fazla olması bunları tek tek ele almanın pek mümkün olmadığı bir duruma bize götürür. Tek tek almak hem uygulamamızı çok kırılgan hale getirecek, hemde Styling ile ilgili çok fazla parametrik değer tutmamıza neden olacaktır.
Bunun yerine belli genişlik ve yükseklik aralıklarında çalışacak genel styling yapıları üzerinde durmaya çalışmakta fayda var. Aşağıdaki min-width aralıklarından da görebileceğiniz gibi bu aralıklarda olan değişkenlere göre UI farklı stiller, uzunluklar ve büyüklükler tanımlayabilirsiniz.
@media (min-width:320px) {
/* smartphones, iPhone, portrait 480x320 phones */ }@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }@media (min-width:1281px) { /* hi-res laptops and desktops */ }
Hesap Makinesine geri döndüğümüzde hem hesap makinesi genişlik ve uzunluk, ve font-size değişen media-query göre parametrik ve dinamik hale getirdim.
Bu sayede hesap makinesi belli aralıklarda belli büyüklükte olacak şekilde tasarımımı gerçekleştiriyorum.
Tam Dinamik Olsun?
Tam anlamıyla dinamik olsun media query kullanmayacağım diyorsanız ozaman unit kısmına sabit pixel vermek yerine vw viewport unit üzerinden tanımlamanız tüm sayfayı ekran ölçülerine göre dinamik hale getirecektir.
unit:10px -> unit: 1vw Layout
Hesap Makinesi gösterim örneğinde 2 tip Layout içerisinde yapının sırlanmasını istiyorum.
- Geniş ekranlarda demo ekranı ve açıklama kısmı yan yan dursun
- Dar ekranlarda ise demo ekranı ve açıklama kısmı alt alta dizilsin.
Ben örnekte FlexLayout kullandığım için flex-direction değiştirmemiz yeterli oldu. Veya Grid sistemi kullanıyor olsaydık column sayısını değiştirebilirdik.
Not: Burda önemli bir konu SCSS, LESS gibi Preprocessor çalıştığınız için media-query yapılarınızı $unit ile scss yapmasını beklemeniz yanlış olur. Çünkü bu yapılar sunucu tarafında compie edilerek size statik oluşturulmuştur. Yani SCSS Client Side, tarayıcı üzerinde çalışmadığı için dinamik bir yapı oluşturamaz bunun için CSS Variables — unit vb.. kullanmanız gerekmektedir.
SCSS ve Preprocessors çalışma mantıkları hakkında daha detaylı bilgi için Why Web Dev Preprocessors are So Important? yazımı okumanızı öneririm.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara (React UI Styling) erişmek için bu linke tıklayabilirsiniz.
