• پاسخگویی سوالات در خصوص خرید هاست و ثبت دامنه
  • 013-32625682
upweblogo2upweblogoupweblogo2upweblogo2
  • صفحه اصلی
  • هاست لینوکس ( Cpanel )
    • هاست سی پنل آلمان
    • هاست سی پنل ایران (پیشنهاد ویژه)
    • هاست ارزان و اقتصادی
    • هاست نمایندگی
    • هاست بهینه شده وردپرس (سی پنل)
  • هاست ویندوز ایران
  • سرور مجازی
    • سرور مجازی SSD آلمان
    • سرور مجازی فنلاند
  • قالب وردپرس
    • فروشگاهی
    • شرکتی
    • همه قالب ها
  • دامنه
    • جستجو و ثبت دامنه
    • هزینه ثبت دامنه ها
    • گواهینامه SSL
  • پشتیبانی
    • ارسال درخواست پشتیبانی
    • ارتباط با ما / درباره ما
    • آموزش هاستینگ
    • آموزش HTML
    • قوانین
  • کسب درآمد
ورود به سایت
✕

طراحی وب سایت ریسپانسیو(واکنشگرا) با HTML

اموزش html

ریسپانسیو کردن با HTML

طراحی وب سایت ریسپانسو یا واکنشگرا در مورد ایجاد صفحات وبی بوده که در تمامی دستگاه ها (کامپیوتر،تلفن همراه و…) به خوبی نمایش داده شود.

هدف از ارائه این آموزش، یادگیری طراحی اصولی واکنشگرای صفحات وب با HTML است تا بتوان خروجی و چینش صحیح صفحه وب خود را بر روی ابزارهای نمایشی مختلفی که در بازار موجود هستند، پوشش داد.

در نظر داشته باشید جدا از اینکه طراحی واکنش گرا یا Responsive باعث می‌شود صفحات سایت شما در تمام دستگاه‌ها (دسکتاپ، تپلت و گوشی‌های موبایل) به خوبی نمایش داده شود،

در سئو وب سایت شما نیز تاثیر بسیار زیادی دارد. زیرا از دیدگاه گوگل وب سایتی که ریسپانسیو باشد در نتایج جستجو بیشتر نمایش داده میشود.

طراحی سایت ریسپانسیو چیست؟

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

تنظیم Viewport در Html

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

 

1
<meta name="viewport" content="width=device-width, initial-scalehttps://upweb.ir/wp-admin/post.php?post=15069&action=edit#=1.0">

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

در اینجا یک مثال از یک صفحه وب بدون متا تگ viewport و همان صفحه وب با متا تگ viewport آورده شده است:

تصاویر ریسپانسیو در Html

تصاویر ریسپانسیو تصاویری هستند که برای انطباق با هر نوع اندازه مرورگری تغییر سایز پیدا می‌‌کنند.

با استفاده از ویژگی width
اگر ویژگی width  روی 100٪ تنظیم شود، تصویر به صورت واکنش گرا خواهد بود و افزایش یا کاهش اندازه خواهد یافت:

1
<img src="img_girl.jpg" style="width:100%;">

 

پیش نمایش

ویژگی max-width در HTML

اگر ویژگی max-width را روی ۱۰۰ درصد تنظیم کنید تصویر در صورت نیاز به اندازه‌های کوچک‌تر تغییر سایز پیدا می‌کند اما هرگز بزرگ‌تر از اندازه اصلی خود نخواهد شد:

1
<img src="img_girl.jpg" style="max-width:100%;height:auto;">

 

پیش نمایش

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

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

مثلا تصور کنید در حالت عادی صفحه نمایش یک گلدان پر از گل به طور کامل نمایش می‌یابد. هرچه اندازه صفحه را کوچک‌تر کنید طبق دستورالعملی که قبلا به مرورگر داده‌اید تصویر در انداره کوچکتر مرورگر به تصویر دیگری تغییر پیدا میکند. در انتها اگر صفحه را به کوچک‌ترین حالت ممکن تغییر دهید تصویر دیگری نمایش می‌یابد.

پیش نمایش مثال

اندازه متن ریسپانسیو در Html

اندازه متن می‌تواند با یک واحد “vw” تنظیم شود که به معنی «viewport width» است.

با استفاده از این روش، اندازه متن از اندازه پنجره مرورگر پیروی خواهد کرد. به این ترتیب که اگر پنجره مرورگر بزرگ‌تر یا کوچک‌تر شود، متن هم به همان نسبت تغییر اندازه پیدا می‌کند.

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

پیش نمایش

مدیا کوئری در Html

علاوه بر تغییر اندازه متن و تصویر، در بین برنامه‌نویسان استفاده از مدیا کوئری (media query) در صفحات واکنش گرای وب بسیار رایج است.

شما با استفاده از مدیا کوئری می‌توانید استایل‌های کاملا متفاوتی برای اندازه‌های مختلف مرورگر تعریف کنید. در نمونه کد زیر مشخص شده است که با هر بار تغییر پنجره مرورگر، در نوار زیر چه تغییراتی ایجاد شود:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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 screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
</style>

پیش نمایش

صفحه وب ریسپانسیو یا واکنشگرا در Html-مثال کامل

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

پیش نمایش

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

همه فریمورک های محبوب CSS طراحی واکنشگرا ارائه می دهند.

W3.CSS یک فریمورک‌ CSS مدرن است که به طور پیش فرض از طراحی دسکتاپ، تبلت و موبایل پشتیبانی می کند،W3.CSS کوچکتر و سریعتر از فریمورک‌ CSS مشابه است.

W3.CSS به گونه ای طراحی شده است که مستقل از jQuery یا هر کتابخانه جاوا اسکریپت دیگری باشد.

فریمورک بوت استرپ

یکی از فریم‌ورک‌های بسیار محبوب CSS، فریم‌ورک بوت استرپ (Bootstrap) است که از HTML، CSS و جی کوئری (jQuery) برای ایجاد صفحات واکنش گرا استفاده می‌کند:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
 
<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>
 
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum...</p>
    </div>
  </div>
</div>

پیش نمایش

امیدواریم این آموزش برای شما مفید واقع شده باشد.

مطالب مرتبط

اموزش html
28 آبان 1402

رمزگذاری در HTML-آموزش Charset در HTML به زبان ساده


ادامه مطلب
افزاش سرعت پیشخوان وردپرس
27 آبان 1402

آموزش رفع مشکل کندی سرعت پیشخوان وردپرس بصورت جامع


ادامه مطلب
اموزش html
26 مهر 1402

آموزش کار با نمادها (Symbols) در HTML


ادامه مطلب

آپ وب خانه امن رویاهای آنلاین شما


خرید هاست و ثبت دامنه پیش نیاز برای ایجاد سایت میباشد. سرعت بارگزاری هاست و اپتایم نقش مهمی در سئو سایت دارد. آپ وب تلاش میکند بهترین کیفیت هاست را برای شما ایجاد کند.

آپ وب با بیش از 8 سال سابقه در کنار شماست.

نماد اعتماد الکترونیکی


مجوز وزارت صنعت و معدن

خرید هاست



ارسال تیکت

ارتباط با ما


شماره تماس: 32625682-013
info@upweb.ir

نیاز به پشتیبانی دارید؟

اگر سوالی دارید از طریق تیکت به پشتیبان مطرح نمایید.


ارتباط با ما

© تمام حقوق برای شرکت هاستینگ آپ وب محفوظ می باشد.
ورود به سایت
×
هاست ابری