آموزش گام به گام و تصویری HTML قسمت نوزدهم (ایران گستر)
HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"]
HTML[/caption]
طراحی واکنش گرا چیست؟
می خواهیم چند مورد از مواردی را که در این زمینه کاربرد دارند برایتان بازگو کنیم.(ایران گستر)
تصحیح 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>
|
اگر اندازه ی خروجی یا سایز پنجره تان را کوچک کنید متوجه می شوید که تصویر موجود در کد بالا از کادر خارج می شود. این روش، روش بسیار بدی برای طراحی سایت است.(ایران گستر)
مثال دوم
|
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>
|
در این مثال اگر خروجی یا اندازه ی مرورگر خود را کوچکتر کنید متوجه می شوید که سایز تصویر نیز تغییر می کند و به نوعی تمام صفحه به هم نمیریزد. دلیل اصلی تعیین 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>
|
به صفحه ی خروجی مثال بالا بروید و سایز قسمت خروجی یا مرورگر خود را کوچک کنید. به سرعت متوجه می شوید که سایز تصویر نیز تغییر می کند.(ایران گستر)
البته مشکلی وجود دارد؛ اگر سایز قسمت خروجی را بزرگتر از سایز عادی اش بکنید، تصویر نیز بزرگتر از سایز عادی اش می شود و صفحه را زشت می کند. برای آنکه به تصاویر اجازه ندهیم از سایز مشخصی بزرگتر شوند می توانیم به جای استفاده از خاصیت width از خاصیت max-width استفاده کنیم.(ایران گستر)
در این صورت شاهد مثال زیر می شویم: