آموزش HTML - طراحی وب واکنش‌گرا
طراحی وب واکنش‌گرا (Responsive) به معنای ایجاد صفحات وب HTML است که در دستگاه‌ها و مرورگرهای مختلف به خوبی کار می‌کنند. این صفحات به طور خودکار تنظیم می‌شوند تا با اندازه‌های مختلف صفحه نمایش و ویوپورت‌ها (Viewports) منطبق شوند.
طراحی وب واکنش‌گرا چیست؟
طراحی وب واکنش‌گرا رویکردی است که امکان ایجاد صفحات وبی را فراهم می‌کند که با اندازه‌های مختلف صفحه نمایش، رزولوشن‌ها و دستگاه‌هایی مانند رایانه‌های رومیزی، لپ‌تاپ‌ها، تبلت‌ها و گوشی‌های هوشمند سازگار هستند. این کار به بهبود تجربه کاربری، دسترس‌پذیری و عملکرد یک وب‌سایت کمک می‌کند.
هنگامی که یک وب‌سایت واکنش‌گرا، مانند TutorialsPoint.com، در هر دستگاهی با ابعاد متفاوت باز می‌شود، محتوا به بهینه‌ترین شکل ممکن و بدون هیچ‌گونه سرریز یا تداخل با سایر عناصر نمایش داده می‌شود. محتوا در تمام دستگاه‌ها یکسان باقی می‌ماند، اما چیدمان آن برای تضمین خوانایی تغییر می‌کند.
بهترین روش‌ها برای واکنش‌گرا کردن صفحات وب
روش‌های مختلفی وجود دارد که با استفاده از آن‌ها می‌توانیم صفحه وب خود را واکنش‌گرا کنیم. یک روش معمول، استفاده از CSS داخلی یا فریم‌ورک‌های بوت‌استرپ است که کامپوننت‌های از پیش طراحی‌شده و سیستم‌های شبکه‌ای (Grid) را ارائه می‌دهند. در ادامه چند مرحله عمومی برای اطمینان از واکنش‌گرا بودن یک صفحه وب آورده شده است.
- استفاده از چیدمان‌های شبکه‌ای واکنش‌گرا (Responsive Grid Layouts)
همیشه طرح‌بندی خود را با یک ساختار شبکه‌ای انعطاف‌پذیر طراحی کنید، تا وقتی اندازه صفحه نمایش افزایش می‌یابد، شبکه نیز به همان نسبت گسترش یابد. - استفاده از تصاویر و رسانه‌های واکنش‌گرا
اطمینان حاصل کنید که تصاویر موجود در صفحه وب به درستی در کانتینرهای خود مقیاس‌بندی می‌شوند. می‌توانید از ویژگی‌های CSS مانند "max-width: 100%;" و "height: auto." استفاده کنید. - استفاده از مپینگ‌های رسانه‌ای (Media Queries)
می‌توانید از Media Queryهای CSS برای اعمال استایل‌های مختلف در اندازه‌های مختلف صفحه نمایش استفاده کنید. این به شما امکان می‌دهد چیدمان، اندازه فونت‌ها و سایر عناصر طراحی را بر اساس عرض دستگاه تنظیم کنید. - استفاده از تگ Meta همراه با Viewport
تگ متای viewport داخل تگ <head> در HTML مقیاس‌بندی و رندر مناسب را در دستگاه‌های تلفن همراه تضمین می‌کند. - استفاده از واحدهای نسبی (Relative Units)
از واحدهای نسبی مانند em، rem یا درصد برای اندازه فونت‌ها، فاصله داخلی (padding) و حاشیه خارجی (margin) استفاده کنید تا اطمینان حاصل شود که متن به طور مناسب مقیاس‌پذیر است.
استفاده از Viewport برای طراحی واکنش‌گرا
ویوپورت (Viewport) نشان‌دهنده ناحیه قابل مشاهده از دستگاه کاربر است. محتوایی که خارج از ویوپورت است با اسکرول کردن قابل مشاهده خواهد بود. این تگ با کنترل عرض و مقیاس صفحه، به رندر خوب صفحات وب در دستگاه‌های مختلف کمک می‌کند.
برای کنترل ویوپورت، تگ <meta> زیر را در بخش <head> اضافه کنید −
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">تگ بالا به مرورگر می‌گوید که عرض صفحه را با عرض صفحه نمایش تطبیق دهد و سطح زوم اولیه را در اولین باری که صفحه توسط کاربر بارگذاری می‌شود تنظیم کند.
ما می‌توانیم تنظیمات ویوپورت را برای width، initial-scale، maximum-scale، minimum-scale و user-scalable تنظیم کنیم. این تنظیمات می‌توانند وب‌سایت ما را دسترس‌پذیرتر و کاربرپسندتر کنند.
ویژگی‌های تگ Meta Viewport برای واکنش‌گرایی
ویژگی‌های زیر از تگ <meta> viewport برای واکنش‌گرایی استفاده می‌شوند −
| شماره | ویژگی و توضیحات |
|---|---|
| ۱ |
عرض ویوپورت مجازی را کنترل می‌کند. |
| ۲ |
ارتفاع ویوپورت مجازی را کنترل می‌کند. |
| ۳ |
سطح زوم اولیه ویوپورت را هنگام اولین بارگذاری صفحه وب مشخص می‌کند. |
| ۴ |
حداقل سطح زومی که کاربر می‌تواند روی صفحه انجام دهد را مشخص می‌کند. |
| ۵ |
حداکثر سطح زومی که کاربر می‌تواند روی صفحه انجام دهد را تعریف می‌کند. |
| ۶ |
مشخص می‌کند که آیا کاربر می‌تواند زوم این یا زوم اوت کند یا خیر. |
| ۷ |
نحوه تأثیر ویجت‌های تعاملی رابط کاربری بر ویوپورت را تعریف می‌کند. |
مثال
مثال زیر نحوه استفاده از تگ <meta> viewport را برای واکنش‌گرا کردن یک صفحه وب نشان می‌دهد:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
background-color: #f1f1f1;
display: flex;
flex-direction: row;
}
.col {
width: 47%;
margin: auto 1%;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 100px;
font-size: 10px;
}
</style>
</head>
<body>
<h2>Setting up dimensions in percentage for the HTML element </h2>
<div class="container">
<div class="col"> Column 1 </div>
<div class="col"> Column 2 </div>
</div>
</body>
</html>با اجرای کد HTML بالا، یک چیدمان واکنش‌گرای دو ستونه نمایش داده خواهد شد.
ایجاد متن واکنش‌گرا
در HTML، برای ساخت متن واکنش‌گرا که اندازه فونت خود را به طور خودکار بر اساس ویوپورت تنظیم کند، باید از ویژگی font-size در CSS همراه با واحد طول "vw" استفاده کنیم. عبارت vw اختصاری است که مخفف view width یا viewport width می‌باشد و یک واحد طول نسبی در CSS است.
واحدهای طول نسبی همیشه نسبت به اندازه عنصر دیگری محاسبه می‌شوند. توجه داشته باشید که 1vw برابر با ۱٪ از عرض ویوپورت است.
مثال
در این مثال، ما از واحد طول "vw" برای واکنش‌گرا کردن متن استفاده می‌کنیم:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 style="font-size:6vw;">Example of Responsive Typography</h1>
<h2 style="font-size:5vw;">Responsive text by Using the vw length unit.</h2>
<p style="font-size:3vw;"> The text will adapt the font size according to the device's width. </p>
</body>
</html>کد HTML بالا یک متن واکنش‌گرا تولید خواهد کرد.
ایجاد تصاویر واکنش‌گرا
در HTML، ما می‌توانیم تصاویری ایجاد کنیم که واکنش‌گرا باشند، به این معنی که بتوانند اندازه خود را برای انطباق با ویوپورت تنظیم کنند. برای انجام این کار، می‌توانیم ویژگی width تصویر را روی 100% یا ویژگی max-width را روی 100% قرار دهیم. ویژگی width می‌تواند تصویر را بزرگ‌تر از اندازه اصلی خود مقیاس‌بندی کند، از طرف دیگر، ویژگی max-width تضمین می‌کند که تصویر فراتر از اندازه اصلی خود بزرگ نشود.
مثال
مثال زیر نحوه ایجاد تصاویر واکنش‌گرا را نشان می‌دهد. برای تصویر اول از ویژگی width و برای تصویر دوم از ویژگی max-width استفاده می‌کنیم:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Setting the width property to 100% </h2>
<img src="https://www.tutorialspoint.com/images/logo.png" alt="logo" style="width:100%; ">
<h2> Creating the responsive image by setting the max-width property to 100% </h2>
<img src="https://www.tutorialspoint.com/images/logo.png" alt="logo" style="max-width:100%; height:auto; ">
</body>
</html>با اجرای کد بالا، یک تصویر واکنش‌گرا دریافت خواهیم کرد.
طراحی واکنش‌گرا با استفاده از Media Queryها
عبارت Media Query در CSS به عنوان فیلتری عمل می‌کند که به ما امکان می‌دهد صفحه وب را به طور انتخابی برای دستگاه‌های مختلف استایل‌دهی کنیم. یک صفحه وب می‌تواند دارای چند Media Query باشد که هر کدام برای اندازه خاصی از صفحه نمایش هستند. برای تعریف این اندازه‌های صفحه نمایش، از نقاط شکست (Breakpoints) در media query استفاده می‌کنیم و عناصر HTML را بر اساس آن استایل‌دهی می‌کنیم. نقاط شکست رایج عبارتند از −
Mobile: 360 x 640 px
Tablet: 768 x 1024 px
Laptop: 1366 x 768 px
HDdesktop: 1920 x 1080 pxمثال
کد HTML زیر استفاده از Media Queryها را در طراحی یک چیدمان واکنش‌گرا نشان می‌دهد.
<html>
<head>
<style>
.main {
width: 50%;
height: 50vh;
display: flex;
align-items: center;
text-align: center;
margin: 10px auto;
flex-direction: column;
}
img {
width: 100%;
height: 100%;
}
.description {
width: 100%;
height: 100%;
font-size: 30px;
color: red;
margin-top: 20px;
}
/* using media query */
@media screen and (max-width: 600px) {
.main {
width: 100%;
height: 100vh;
margin: 5px auto;
}
.description {
font-size: 20px;
color: blue;
margin-top: 10px;
}
}
</style>
</head>
<body>
<div class="main">
<img src="https://www.tutorialspoint.com/images/logo.png" alt="logo" width="100" height="200">
<div class="description"> The above is a logo of Tutorilaspoint. The logo is responsive, and it will be displayed in the centre of the screen. </div>
</div>
</body>
</html>علاوه بر تکنیک‌های ذکر شده در بالا، روش‌های دیگری مانند Flexbox و CSS Grid نیز می‌توانند برای طراحی صفحات وب واکنش‌گرا مورد استفاده قرار گیرند. ما این تکنیک‌ها را با جزئیات در فصل‌های قبلی بررسی کرده‌ایم.
پیشرفت مطالعه: وضعیت خوانده‌شدن این درس فقط در همین مرورگر ذخیره می‌شود؛ بدون نیاز به حساب کاربری.