واکنش گرایی html چیست؟ و چه مزایایی دارد؟
آموزش html درس بیست و پنجم
طراحی وب واکنشگرا چیست؟
واکنش گرایی html :طراحی وب واکنشگرا باعث می شود که صفحه وب در همه دستگاه ها (دسکتاپ، تبلت و تلفن) خوب ظاهر شود.
طراحی وب واکنشگرا در مورد استفاده از HTML و CSS برای تغییر اندازه، پنهان کردن، کوچک کردن، بزرگنمایی یا انتقال محتوا است تا آن را در هر صفحه نمایشی خوب ببینیم.
طراحی ظاهر html با css را از اینجا ببینید
نکته : هر صفحه وب باید در هر دستگاهی خوب به نظر برسد.
واکنش گرایی html : تنظیم Viewport
هنگام ساخت صفحات وب واکنشگرا، عنصر <meta> در زیر را به تمام صفحات وب خود اضافه کنید:
مثال:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
این Viewport صفحه شما را تنظیم می کند، که دستورالعمل هایی را به مرورگر می دهد که چطور ابعاد صفحه و مقیاس بندی را کنترل کند.
واکنش گرایی html : تصاویر واکنشگرا
تصاویر واکنشگرا، تصاویری هستند که به راحتی در هر اندازه ای با مرورگر متناسب اند.
استفاده از width Property
اگر ویژگی عرض ۱۰۰٪ تنظیم شود، تصویر واکنشگرا خواهد بود و مقیاس بالا و پایین می شود.
مثال :
<img src="img_girl.jpg" style="width:100%;">
توجه داشته باشید که در مثال بالا، تصویر را می توان بزرگتر از اندازه اصلی آن دانست. در بسیاری از موارد یک راه حل بهتر، استفاده از ویژگی حداکثر عرض است.
استفاده از خاصیت max-width
اگر مقدار حداکثر عرض یا max-width به ۱۰۰٪ تنظیم شود، اگر بخواهید مقیاس آن کمتر می شود ، اما هرگز مقیاس آن بزرگتر از اندازه اصلی نمی شود.
مثال :
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
نمایش تصاویر مختلف با توجه به عرض مرورگر
عنصر <picture> به شما اجازه می دهد تا تصاویر مختلف را برای اندازه پنجره های مختلف مرورگر تعریف کنید.
مثال :
<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>
اندازه متن واکنشگرا
اندازه متن را می توان با واحد “vw” تنظیم کرد که به معنی “viewport width” است.
به این ترتیب اندازه متن از اندازه پنجره مرورگر پیروی می کند:
مثال:
<h1 style="font-size:10vw">Hello World</h1>
Media Queries
علاوه بر تغییر اندازه متن و تصاویر، همچنین استفاده از Media Queries در صفحات وب واکنشگرا معمول است.با استفاده از Media Queries شما می توانید استایل های کاملا متفاوت برای اندازه های مختلف مرورگر تعریف کنید.
<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>
صفحه وب واکنشگرا – مثال کامل
یک صفحه وب واکنشگرا باید روی صفحه نمایش بزرگ و تلفن های همراه کوچک خوب به نظر برسد.
طراحی وب واکنشگرا – Frameworks
تعداد زیادی فریم ورک های css وجود دارد که طراحی واکنشگرا ارائه می دهند. آنها رایگان و برای استفاده آسان هستند.
استفاده از W3.CSS
یک راه عالی برای ایجاد یک طراحی واکنشگرا،استفاده از style sheet واکنشگرا است مثل W3.CSS
W3.CSS توسعه سایت ها را آسان تر می کند که در هر اندازه در دستکتاپ، لپ تاپ، تبلت، یا تلفن خوب به نظر می رسد:
مثال:
<!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>
<div class="w3-container w3-green">
<h1>W3Schools Demo</h1>
Resize this responsive page!
</div>
<div class="w3-row-padding">
<div class="w3-third">
<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>
<div class="w3-third">
<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>
<div class="w3-third">
<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>
</div>
</body>
</html>
Bootstrap
یکی دیگر از فریم ورک های محبوب بوت استرپ است. بوت استرپ از HTML, CSS , jQuery استفاده می کند تا صفحات وب واکنشگرا بسازد.
مثال :
<!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>
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
</div>
<div class="row">
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
</div>
</body>
</html>
