ساخت یک وب سایت واکنش گرا بدون چارچوب و تعداد زیادی کتابخانه نیاز به برنامه ریزی دقیق و اجرای برخی از تکنیک های کلیدی دارد. در اینجا مثالی از نحوه ایجاد یک وب سایت واکنش گرا با استفاده از HTML، CSS و جاوا اسکریپت آورده شده است:
- HTML (index.html):
<!DOCTYPE html>
<html>
<head>
<title>Responsive Website</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Responsive Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>About</h2>
<p>This is a sample responsive website.</p>
</section>
<section>
<h2>Services</h2>
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>SEO</li>
<li>Graphic Design</li>
</ul>
</section>
<section>
<h2>Contact</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form>
</section>
</main>
<footer>
© 2023 My Responsive Website. All rights reserved.
</footer>
<script src="script.js"></script>
</body>
</html>
- CSS (styles.css):
/* Reset default styles */
body, h1, h2, p, ul, li {
margin: 0;
padding: 0;
}
/* Header styles */
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
/* Navigation styles */
nav ul {
list-style-type: none;
background-color: #666;
overflow: hidden;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #444;
}
/* Main section styles */
main {
padding: 20px;
}
/* About section styles */
section {
margin-bottom: 20px;
}
/* Contact form styles */
form {
display: grid;
gap: 10px;
}
/* Footer styles */
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
- جاوا اسکریپت (script.js):
// JavaScript code can be added as per your requirements
در این مثال، ساختار HTML مشابه نمونه قبلی است، اما ما چند بخش دیگر را برای نشان دادن پاسخگویی اضافه کرده ایم. فایل CSS شامل سبک های اضافی برای واکنش گرا کردن وب سایت است.
برای ریسپانسیو کردن وب سایت، می توانید درخواست های رسانه ای را به فایل CSS اضافه کنید. در اینجا مثالی از نحوه تغییر CSS برای پاسخگو کردن ناوبری آورده شده است:
در اینجا مثالی از نحوه تغییر CSS برای پاسخگو کردن پیمایش با استفاده از پرس و جوهای رسانه آورده شده است:
/* Navigation styles */
nav ul {
list-style-type: none;
background-color: #666;
overflow: hidden;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #444;
}
/* Media query for responsive navigation */
@media (max-width: 768px) {
nav ul {
display: flex;
flex-direction: column;
align-items: center;
}
nav ul li {
float: none;
margin-bottom: 10px;
}
}
در کد بالا، یک پرسش رسانه ای با استفاده از اضافه شده است @media برای هدف قرار دادن صفحه نمایش با حداکثر عرض 768 پیکسل. در این درخواست رسانه، منوی پیمایش برای نمایش عمودی با تغییر تغییر داده شده است flex-direction ویژگی. این float دارایی تنظیم شده است none برای موارد لیست برای حذف تراز افقی، و a margin-bottom برای ایجاد فاصله بین موارد لیست اضافه شده است.
می‌توانید درخواست‌های رسانه‌ای بیشتری اضافه کنید و سبک‌ها را با توجه به نیازهای طراحی واکنش‌گرای خاص خود تنظیم کنید.
به یاد داشته باشید، طراحی ریسپانسیو شامل تطبیق طرح و سبک وب سایت شما با اندازه های مختلف صفحه نمایش و دستگاه ها است. اغلب به تکنیک های CSS اضافی مانند استفاده از واحدهای نسبی (به عنوان مثال، درصد، em، rem) برای اندازه‌بندی عناصر، استفاده از طرح‌بندی‌های انعطاف‌پذیر (مانند Flexbox یا CSS Grid)، و بهینه‌سازی رسانه (تصاویر، ویدیوها) برای دستگاه‌های مختلف.
در اینجا نمونه ای از نحوه پاسخگویی بخش محتوای اصلی با استفاده از پرس و جوهای رسانه CSS آورده شده است:
/* Main section styles */
main {
padding: 20px;
}
/* About section styles */
section {
margin-bottom: 20px;
}
/* Media queries for responsive layout */
@media (max-width: 768px) {
main {
padding: 10px;
}
section {
margin-bottom: 10px;
}
}
@media (max-width: 480px) {
main {
padding: 5px;
}
}
در کد بالا، دو پرس و جو رسانه برای هدف قرار دادن عرض های مختلف صفحه اضافه شده است. اولین درخواست رسانه صفحه‌هایی با حداکثر عرض 768 پیکسل را هدف قرار می‌دهد و بالشتک و حاشیه را برای بخش محتوای اصلی تنظیم می‌کند. دومین درخواست رسانه صفحه نمایش هایی با حداکثر عرض 480 پیکسل را هدف قرار می دهد و بالشتک را بیشتر تنظیم می کند.
شما می توانید این پرسش های رسانه ای را بر اساس نیازهای طراحی خاص خود سفارشی کنید. ایده این است که از پرسش‌های رسانه‌ای برای اعمال سبک‌های مختلف در اندازه‌های مختلف صفحه استفاده کنید، وب‌سایت شما را واکنش‌گرا می‌کند و تجربه کاربری بهتری را در دستگاه‌های مختلف تضمین می‌کند.
به‌علاوه، وقتی نوبت به طراحی واکنش‌گرا می‌رسد، مهم است که جنبه‌های دیگری مانند تصاویر انعطاف‌پذیر، تایپوگرافی روان، فرم‌های سازگار با موبایل و بهینه‌سازی طرح‌بندی برای جهت‌های مختلف صفحه را در نظر بگیرید.
برای دستیابی به رفتار پاسخگوی مطلوب برای وب سایت خود، می توانید درخواست های رسانه ای بیشتری اضافه کنید و سبک ها را در صورت نیاز تنظیم کنید.
درباره نویسنده. جفری کالاگان یک برنامه نویس ارشد در fabform.io است که روی تیم خدمات پشتیبانی فرم کار می کند.
