واکنش گرایی html چیست ؟ طراحی وب واکنشگرا چگونه است؟

واکنش گرایی html چیست؟ و چه مزایایی دارد؟

آموزش html درس بیست و پنجم

طراحی وب واکنشگرا چیست؟

واکنش گرایی html :طراحی وب واکنشگرا باعث می شود که صفحه وب در همه دستگاه ها (دسکتاپ، تبلت و تلفن) خوب ظاهر شود.
طراحی وب واکنشگرا در مورد استفاده از HTML و CSS برای تغییر اندازه، پنهان کردن، کوچک کردن، بزرگنمایی یا انتقال محتوا است تا آن را در هر صفحه نمایشی خوب ببینیم.

طراحی ظاهر html با css را از اینجا ببینید

نکته : هر صفحه وب باید در هر دستگاهی خوب به نظر برسد.

واکنش گرایی html : تنظیم Viewport

هنگام ساخت صفحات وب واکنشگرا، عنصر <meta> در زیر را به تمام صفحات وب خود اضافه کنید:

مثال:

[php]
<meta name="viewport" content="width=device-width, initial-scale=1.0">
[/php]

این Viewport صفحه شما را تنظیم می کند، که دستورالعمل هایی را به مرورگر می دهد که چطور ابعاد صفحه و مقیاس بندی را کنترل کند.

واکنش گرایی html : تصاویر واکنشگرا

تصاویر واکنشگرا، تصاویری هستند که به راحتی در هر اندازه ای با مرورگر متناسب اند.

استفاده از width Property

اگر ویژگی عرض 100٪ تنظیم شود، تصویر واکنشگرا خواهد بود و مقیاس بالا و پایین می شود.

مثال :

[php]
<img src="img_girl.jpg" style="width:100%;">
[/php]

توجه داشته باشید که در مثال بالا، تصویر را می توان بزرگتر از اندازه اصلی آن دانست. در بسیاری از موارد یک راه حل بهتر، استفاده از ویژگی حداکثر عرض است.

استفاده از خاصیت max-width

اگر مقدار حداکثر عرض یا max-width به 100٪ تنظیم شود، اگر بخواهید مقیاس آن کمتر می شود ، اما هرگز مقیاس آن بزرگتر از اندازه اصلی نمی شود.

مثال :

[php]
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
[/php]

نمایش تصاویر مختلف با توجه به عرض مرورگر

عنصر <picture> به شما اجازه می دهد تا تصاویر مختلف را برای اندازه پنجره های مختلف مرورگر تعریف کنید.
مثال :

[php]
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
[/php]

اندازه متن واکنشگرا

اندازه متن را می توان با واحد “vw” تنظیم کرد که به معنی “viewport width” است.
به این ترتیب اندازه متن از اندازه پنجره مرورگر پیروی می کند:

مثال:

[php]

<h1 style="font-size:10vw">Hello World</h1>

[/php]

Media Queries

علاوه بر تغییر اندازه متن و تصاویر، همچنین استفاده از Media Queries در صفحات وب واکنشگرا معمول است.با استفاده از Media Queries شما می توانید استایل های کاملا متفاوت برای اندازه های مختلف مرورگر تعریف کنید.

[php]
<style>
.left, .right {
float:left;
width:20%; /*The width is 20%, by default*/
}

.main {
float:left;
width:60%; /*The width is 60%, by default*/
}

/*Use a media query to add a breakpoint at 800px:*/
@media (max-width:800px) {
.left, .main, .right {
width:100%; /*The width is 100%, when the viewport is 800px or smaller*/
}
}
</style>
[/php]

صفحه وب واکنشگرا – مثال کامل

یک صفحه وب واکنشگرا باید روی صفحه نمایش بزرگ و تلفن های همراه کوچک خوب به نظر برسد.

طراحی وب واکنشگرا – Frameworks

تعداد زیادی فریم ورک های css وجود دارد که طراحی واکنشگرا ارائه می دهند. آنها رایگان و برای استفاده آسان هستند.

استفاده از W3.CSS

یک راه عالی برای ایجاد یک طراحی واکنشگرا،استفاده از style sheet واکنشگرا است مثل W3.CSS

W3.CSS توسعه سایت ها را آسان تر می کند که در هر اندازه در دستکتاپ، لپ تاپ، تبلت، یا تلفن خوب به نظر می رسد:

مثال:

[php]
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<h1>W3Schools Demo</h1>

Resize this responsive page!

</div>

<h2>London</h2>

London is the capital city of England.

It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.

</div>

<h2>Paris</h2>

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.

</div>

<h2>Tokyo</h2>

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.

</div>

</body>
</html>
[/php]

Bootstrap

یکی دیگر از فریم ورک های محبوب بوت استرپ است. بوت استرپ از HTML, CSS , jQuery استفاده می کند تا صفحات وب واکنشگرا بسازد.

مثال :

[php]
<!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">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F3.2.0%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.7%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body>

<h1>My First Bootstrap Page</h1>

</div>

</div>

</body>
</html>
[/php]