٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش HTML طراحی وب پاسخگو

طراحی وب پاسخگو ایجاد صفحات وب است که در همه دستگاه ها خوب به نظر می رسد! یک طراحی وب پاسخگو به طور خودکار برای اندازه های مختلف صفحه نمایش و نمایشگاه ها تنظیم می شود. طراحی وب ریسپانسیو چیست؟…

محمد یوسفی

30 ژوئن 2021

طراحی وب پاسخگو ایجاد صفحات وب است که در همه دستگاه ها خوب به نظر می رسد!

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

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

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

تنظیم Viewport

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

بدون نشان متا viewport: با متا تگ viewport:

 

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

تصاویر پاسخگو

تصاویر پاسخگو تصاویری هستند که به خوبی متناسب با هر اندازه مرورگری مقیاس بندی می شوند.

با استفاده از ویژگی عرض

اگر widthویژگی CSS روی 100٪ تنظیم شود ، تصویر واکنش گرا خواهد بود و بالا و پایین می شود:

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

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

با استفاده از ویژگی حداکثر عرض

اگر max-widthویژگی روی 100٪ تنظیم شود ، در صورت لزوم تصویر پائین می آید ، اما هرگز اندازه آن بزرگتر از اندازه اصلی خود نیست:

 

 

 

 

 

 

 

 

 

 

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

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

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

اندازه پنجره مرورگر را تغییر دهید تا ببینید که تصویر زیر بسته به عرض تغییر می کند:

<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” تنظیم کرد ، که به معنای “عرض دید” است.

به این ترتیب اندازه متن از اندازه پنجره مرورگر پیروی می کند:

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

Viewport اندازه پنجره مرورگر است. 1vw = 1٪ از عرض دید. اگر عرض دید 50 سانتی متر باشد ، 1vw 0.5 سانتی متر است.


داستان های رسانه

علاوه بر تغییر اندازه متن و تصاویر ، استفاده از جستجوی رسانه در صفحات وب پاسخگو نیز معمول است.

با درخواست های رسانه ای می توانید سبک های کاملاً متفاوتی را برای اندازه های مختلف مرورگر تعریف کنید.

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

<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>

صفحه وب پاسخگو – مثال کامل

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


طراحی وب پاسخگو – چارچوب ها

همه چارچوب های محبوب CSS طراحی پاسخگو را ارائه می دهند.

آنها رایگان هستند و استفاده از آنها آسان است.

W3.CSS

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

W3.CSS کوچکتر و سریعتر از چارچوبهای CSS مشابه است.

W3.CSS به عنوان یک جایگزین با کیفیت بالا برای Bootstrap طراحی شده است.

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

<!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>
  <p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in Europe,
    with more than 12 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>

</body>
</html>

بوت استرپ

یکی دیگر از چارچوب های محبوب CSS ، بوت استرپ است. بوت استرپ از 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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></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>

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها