Responsive Zoom Media Screen Problemi

Frontend çalışmaları yaparken responsive tasarım yapmaya dikkat ederiz ve bazen zoom out veya zoom in browser üzerinden yapıp tasarımı test ederiz? 🙂

Bildiğiniz üzere css tarafında farklı ölçekli cihazlar için @media etiketini kullanırız.

Yaptığım bir araştırmaya göre zoom in veya zoom out browser üzerinden yaptığınız zaman sayfa gördüğünüz gibi screen sizeları değişmiyor.

Veriler gösteriyor ki %175 zoom oranın da ekran çözünürlüğü 732px. Bu sonuçlar da durumu ispatlar nitelikte.

Farklı cihazlarda test için tarayıcınızın inspect (incele) bölümünden farklı çözünürlükler için denemelerinizi yapabilirsiniz.

SASS @content Kullanımı

Responsive tasarım yaparken yazılan kodları kısaltmak amacıyla ve responsive kodlarını oluştururken çok kolaylık sağlayan bir yapıdan bahsetmek istiyorum.

@mixin desktop {
@media only screen and (max-width: 1440px) and ( min-width: 1200px ){
@content
}
}

Yukarıda ki oluşturduğumuz yapıyı kullanabilmemiz için de;

html {
font-family: 'Gilroy', sans-serif;
@include desktop {
display: none;
}
}

@include içerisinde yazdığımız her yeni bir kod bloğu @content olarak @mixin içerisinde kullanabiliyoruz.

Responsive kod için sayfaları tekrardan derlerken ciddi anlamda pratiklik sağlıyor. Umarım sizinde işinize yarar, bol kodlamalı günler 🙂

PhpStorm SASS (SCSS) FileWatcher ile CSS Çevirmek

Merhaba, front end geliştirme yaparken bazen sass dosyalarının css’e otomatik olarak derleme ihtiyacı duyabilirsiniz.

Bunun için settings > file watcher

Bu bölümün altından yeni ekleye bastıktan sonra, cihazınızda sass ın kurulu olduğundan ve ayarlarda doğru path’i verdiğinizden emin olmalısınız.

Arguments yazan alana;

$FileName$:$ProjectFileDir$/assets/css/$FileNameWithoutExtension$.css

Outputs Path yazan alanada;

$ProjectFileDir$/assets/css/$FileNameWithoutExtension$.css

Daha iyi anlaşılabilmesi için bende ki ayarların bir ekran görüntüsünü paylaşıyorum belki sizede bir faydası olur.

Php Storm File Watcher