طراحی واکنش گرا نوعی از طراحی سایت بوده که در سال های اخیر باب شده است و هدف اصلی آن استفاده از HTML و CSS به طوری است که ظاهر و سایز صفحات را بر اساس نیازشان تغییر دهد. نیاز به تغییر سایز صفحات به خاطر متغیر بودن اندازه ی صفحات دستگاه هایی است که به سایت ما مراجعه می کنند. بزرگی صفحه ی کامپیوتر های عادی با یک گوشی هوشمند یا تبلت یکی نیست و این مسئله باعث می شود که بازدید با گوشی همراه از سایت ما آزار دهنده باشد. راه حل این مشکل طراحی واکنش گرا است.
می خواهیم چند مورد از مواردی را که در این زمینه کاربرد دارند برایتان بازگو کنیم.
تصحیح Viewport
اولین قدم برای واکنش گرا کردن یک سایت تنظیم viewport آن با استفاده از <meta> می باشد. در دو مثال زیر تفاوت استفاده از آن را متوجه می شوید:
مثال اول
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<body>
<p><b>Tounderstand thisexample,you should open thispage onaphone oratablet.</b></p>
<img src="https://www.w3schools.com/css/img_chania.jpg"alt="Chania"width="460"height="345">
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor inhendrerit invulputate velit esse molestie consequat,vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اگر اندازه ی خروجی یا سایز پنجره تان را کوچک کنید متوجه می شوید که تصویر موجود در کد بالا از کادر خارج می شود. این روش، روش بسیار بدی برای طراحی سایت است.
مثال دوم
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0"/>
<style>
img {
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<p><b>Tounderstand thisexample,you should open thispage onaphone oratablet.</b></p>
<img src="https://www.w3schools.com/css/img_chania.jpg"alt="Chania"width="460"height="345">
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor inhendrerit invulputate velit esse molestie consequat,vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در این مثال اگر خروجی یا اندازه ی مرورگر خود را کوچکتر کنید متوجه می شوید که سایز تصویر نیز تغییر می کند و به نوعی تمام صفحه به هم نمیریزد. دلیل اصلی تعیین Viewport نیز همین نظم است.
استفاده از تصاویر واکنش گرا
تصاویر واکنش گرا تصاویری هستند که با تغییر سایز صفحه، سایزشان تغییر می کند. اگر خاصیت width را برابر با 100درصد گذاشته باشید، تصاویر از نوع واکنش گرا خواهند بود و سایزشان تغییر می کند.
به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<body>
<h2>Responsive Image</h2>
<pdir='rtl'>اگرخاصیت width رابرابربا100درصدگذاشتهباشید،تصاویرازنوعواکنشگراخواهندبودوسایزشانتغییرمیکند.</p>
<img src="https://www.w3schools.com/html/img_girl.jpg"style="width:100%;">
</body>
</html>
|
مشاهده ی خروجی در JSBin
به صفحه ی خروجی مثال بالا بروید و سایز قسمت خروجی یا مرورگر خود را کوچک کنید. به سرعت متوجه می شوید که سایز تصویر نیز تغییر می کند!
البته مشکلی وجود دارد؛ اگر سایز قسمت خروجی را بزرگتر از سایز عادی اش بکنید، تصویر نیز بزرگتر از سایز عادی اش می شود و صفحه را زشت می کند. برای آنکه به تصاویر اجازه ندهیم از سایز مشخصی بزرگتر شوند می توانیم به جای استفاده از خاصیت width از خاصیت max-width استفاده کنیم.
در این صورت شاهد مثال زیر می شویم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<body>
<h2>Responsive Image</h2>
<pdir='rtl'>اگرخاصیت max-width رابرابربا100درصدگذاشتهباشید،تصاویرازنوعواکنشگراخواهندبودوسایزشانتغییرمیکند.
همچنینازحدعادیخودشانبزرگترنمیشوند.برایمشاهدهیتفاوتازخطوسطصفحهبگیریدوقسمتخروجیرابزرگترکنید.
</p>
<img src="https://www.w3schools.com/html/img_girl.jpg"style="max-width:100%;height:auto;">
</body>
</html>
|
مشاهده ی خروجی در JSBin
حالا هر چقدر هم که قسمت خروجی را بزرگتر کنید، سایز تصویر ما افزایش بیش از حد نخواهد داشت.
استفاده از تصاویر متفاوت
برخی اوقات تغییر سایز تصویر راه حل خوبی نیست و به درستی کار نمی کند. برای چنین مواقعی می توانیم از عنصر <picture> استفاده کنیم. این عنصر به شما اجازه می دهد که چندین تصویر را برای یک قسمت قرار دهید که بر اساس سایز صفحه، کاربر تصویر مناسب اش را به او بدهیم. به این مثال نگاهی بیندازید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<body>
<h2>Show Different Images Depending on Browser Width</h2>
<p>Resize the browser width andthe image will change at600pxand1500px.</p>
<picture>
<source srcset="https://www.w3schools.com/html/img_smallflower.jpg"media="(max-width: 600px)">
<source srcset="https://www.w3schools.com/html/img_flowers.jpg"media="(max-width: 1500px)">
<source srcset="https://www.w3schools.com/html/flowers.jpg">
<img src="https://www.w3schools.com/html/img_flowers.jpg"alt="Flowers"style="width:auto;">
</picture>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در مثال بالا اگر سایز قسمت خروجی را تغییر دهید، تصاویر متفاوتی را مشاهده خواهید کرد! این قابلیت می تواند به شما کمک بسیار زیادی بکند.
نتها نکته ی منفی این دستور این است که با آپلود کردن چندین عکس برای هر قسمت از سایتتان، فضای زیادی از سرور را اشغال می کنید بنابراین پیشنهاد ما این است که از این قابلیت تنها در جاهایی استفاده کنید که با کدنویسی جواب نگرفته اید.
متون واکنش گرا
با بزرگ و کوچک شدن یک صفحه، متون ما نیز باید کوچک و بزرگ شوند، در غیر این صورت یا صفحه ظاهر زشتی پیدا می کند و یا خواندن مطالب خیلی سخت می شود. برای واکنش گرا کردن یک متن باید سایز آن را با واحد vw تنظیم کنیم و از مقادیری مثل پیکسل و … دوری کنیم. به کد زیر نگاه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">Responsive Text</h1>
<pdir='rtl'style="font-size:5vw;">باتغییرسایزاینقسمتمتوجهمیشویدکهاندازهیفونتونوشتهیمانیزتغییرمیکند.</p>
<pdir='rtl'style="font-size:5vw;">اگراز10vwاستفادهکنیداندازهیفونتشما10درصدازکلviewportراخواهدگرفت.</p>
<p>Viewport isthe browser window size.1vw=1%of viewport width.Ifthe viewport is50cmwide,1vwis0.5cm.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
با تغییر سایز قسمت خروجی کد بالا می توانید به وضوح مشاهده کنید که اندازه ی نوشته ها نیز تغییر می کند تا کاربر بهتر بتواند محتوا را بخواند.
استفاده از Media Queries
media query ها دستور هایی متعلق به CSS هستند که می توان با استفاده از آن ها طرح صفحات را کاملا تغییر داد به طوری که کاربر فکر می کند وارد سایت دیگری شده است! بهترین روش یادگیری آن از طریق مثال است بنابراین بیایید کدهای زیر را بررسی کنیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing:border-box;
}
.left {
background-color:#2196F3;
padding:20px;
float:left;
width:20%;/* The width is 20%, by default */
}
.main {
background-color:#f1f1f1;
padding:20px;
float:left;
width:60%;/* The width is 60%, by default */
}
.right {
background-color:#4CAF50;
padding:20px;
float:left;
width:20%;/* The width is 20%, by default */
}
/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
.left, .main, .right {
width:100%;/* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
</head>
<body>
<h2>Media Queries</h2>
<p>Resize the browser window.</p>
<pdir='rtl'>قسمتخروجیراکوچکترکنیدتابه800pxبرسد.آنموقعمتوجهتغییرمیشوید
سپسقسمتخروجیرابزرگترکنیدتاببینیددرحالتبزرگچهاتفاقیمیافتد.
</p>
<div class="left">
<p>Left Menu</p>
</div>
<div class="main">
<p>Main Content</p>
</div>
<div class="right">
<p>Right Content</p>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
به خروجی کد بالا بروید و سایز قسمت خروجی را بزرگتر کنید، سپس کوچکتر کنید. متوجه خواهید شد که با تغییر سایز صفحه و رسیدن به نقطه ی عرض 800 پیکسل محتوا تغییر می کند. این به دلیل استفاده از دستور زیر است:
@media screen and (max-width:800px)
این دستور یک media query است و می گوید زمانی که عرض صفحه به 800 پیکسل رسید، استایل های قبلی را فراموش کن و استایل هایی که من می گویم را اعمال کن. به همین دلیل است که شاهد تغییر محتوا در عرض 800 پیکسل هستیم. در مورد media query ها در دوره ی آموزش زبان CSS بیشتر صحبت خواهیم کرد.
استفاده از فریم ورک های CSS
با استفاده از فریم ورک های مختلف زبان CSS می توانید صفحات خود را به صورت واکنش گرا طراحی کنید. تقریبا تمام آن ها رایگان و یادگیری شان نیز بسیار ساده است. مثال زیر با استفاده از فریم ورک Bootstrap طراحی شده است:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
<p>Resize thisresponsive page tosee the effect!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column1</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column2</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column3</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
به خروجی کد بالا بروید و سایز صفحه را بزرگ و کوچک کنید. به راحتی متوجه تغییرات صفحه خواهید شد!
امیدوارم این نکات به درد شما خورده باشد و بتوانید با استفاده از آن ها صفحات بهتر و زیبا تری را تولید کنید.
چطور از فشرده ساز Winrar استفاده کنیم؟