Responsive Web Tasarım

Responsive web tasarım, duyarlı, uyumlu web tasarım anlamına da gelir. Adını sıkça duyduğumuz bu web tasarım şekli ilk olarak 2010 yılında ortaya çıktı ve sonrasında dünyada ve ülkemizde popüler oldu.

Responsive tasarım, web sitesinin mobil ve tablet cihazlardan girildiğinde site içindeki resim, yazı gibi elementlerin ekran genişliğine göre yeniden şekillenip ekrana tam oturması ile oluşur ve son kullanıcıya kolaylık sağlar. Genellikle desktop, tablet ve mobil versiyon olarak 3 kademeli şekilde tasarlanır.

Yapan arkadaşlara kolaylık olması açısından tasarımlarınızda kullanabileceğiniz media screen kodlarını aşağıda veriyorum.

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles - Stil Tanımları */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles - Stil Tanımları */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles - Stil Tanımları */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles - Stil Tanımları */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles - Stil Tanımları */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles - Stil Tanımları */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles - Stil Tanımları */
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
/* Styles - Stil Tanımları */
}

Evet ‘.css’ dosyanınızı ayarladık. Bunun dışında web sitenizin responsive bir site olduğunu tarayıcıların anlayabilmesi için bu meta etiketini

<meta name='viewport' content='width=device-width, initial-scale=1'/>

Sitenizin ‘Head’ kodları arasına yapıştırıyoruz.