Responsive Web Dizayn nedir ve nece istifade edilir

Spread the love
Responsive web design image

Əgər “Responsive web dizayn nedir” deyə düşünürsünüzsə bu yazı tam sizlikdir. Ama öncə bu yazıya keçməzdən əvvəl gəlin web dizayn haqqında azda olsa bilməyənlər üçün bilgi verək.

Web Dizayn, HTML,CSS,JAVASCRIPT və.s kimi web texnologiyalar ilə web saytların dizayn edilməsinə verilən addır.

Responsive web dizayn deyildikdə isə, bütün cihazlara uyumlu web saytlar başa düşülür. Bir sayt düşünün, bu saytı bəzi insanlar “smartphone”larından,bəziləri “Tabletlərindən” bəzilərisə bilgisayarlarından ziyarət edir. Təbii ki, bu üç cihazda istifadəçiyə eyni cür dizayn hazırlamaq olmaz. Əvvəllər biz proqramlaşdırma dillərinin yardımı ilə,saytı ziyarət edənin cihazının nə olduğunu öyrənirdik.(Məs:Tablet) Daha sonra hər bir cihaz üçün ayrı-ayrılıqda dizayn hazırlayırdıq. Bu həm biz Web Dizaynerlərin işini çətinləşdirirdi,həmdə sifarişçilərin xərclərini artırırdı.

Lakin, Responsive Dizaynla bu problem həll oldu. Artıq Responsiv dizaynla, tək bir səhifəni bütün ciahzlarda fərqli görsənəcək şəkildə optimizə edə bilərsiniz.

Və istifadəsi…

Aşağıda bir “index.html” səhifəsi hazırlayacağıq. Bu səhifədə hər üç cihazda fərqli görsənəcək arxa fon rəngini dəyişək. Başlayaq…

<!DOCTYPE html>
<html lang="az-AZ">
<meta charset="utf-8">
<!-- Ilk olaraq bu kodu daxil etməlisiniz. -->
<meta name="viewport"content="width=device-width,inital-scale=1.0">
<title>Welcome</title>
<style>
<!--Mobil cihazlarda arxa fon rəngi qırmızı görsənəcək.-->
@media (max-width:576px)
{
body{background-color:red;}
}
<!-- Tabletlərdə arxa fon rğngi mavi görsənəcək.-->
@media (min-width:577px) and (max-width:768px)
{
body{background-color:blue;}
}
<!--Desktop cihazlarda arxa fon rəngi yaşıl görsənəcək.
-->
@media (min-width:769px)
{
body{background-color:green;}
}

Əslində bu qədər basit. Responsive web dizayn üçün birçox framework var. Ən çox istifadə ediləni Bootstrap-dır. Sizə uğurlu kodlamalar.

Leave a Comment

Your email address will not be published. Required fields are marked *