واکنش گرایی html

واکنش گرایی html  چیست؟ و چه مزایایی دارد؟

آموزش  html  درس بیست و پنجم

طراحی وب واکنشگرا چیست؟

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

طراحی ظاهر  html  با css را از اینجا ببینید

نکته : هر صفحه وب باید در هر دستگاهی خوب به نظر برسد.

واکنش گرایی html
واکنش گرایی html

واکنش گرایی 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 توسعه سایت ها را آسان تر می کند که در هر اندازه در دستکتاپ، لپ تاپ، تبلت، یا تلفن خوب به نظر می رسد:

حتما بخوانید:  لیست html

مثال:

 <!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="&lt;script&gt;" title="&lt;script&gt;" />
<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="&lt;script&gt;" title="&lt;script&gt;" />
</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> 

 

 

 

امتیاز کاربران به این مطلب
۱ نفر - میانگین: ۵
تلگرام

دیدگاه‌تان را ثبت کنید:

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پنج + 20 =

PHN0eWxlPi5oX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWV7cG9zaXRpb246cmVsYXRpdmU7fSAuaF9pZnJhbWUtYXBhcmF0X2VtYmVkX2ZyYW1lIC5yYXRpbyB7ZGlzcGxheTpibG9jazt3aWR0aDoxMDAlO2hlaWdodDphdXRvO30gLmhfaWZyYW1lLWFwYXJhdF9lbWJlZF9mcmFtZSBpZnJhbWUge3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlOyBoZWlnaHQ6MTAwJTt9PC9zdHlsZT48ZGl2IGNsYXNzPSJoX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWUiPiA8c3BhbiBzdHlsZT0iZGlzcGxheTogYmxvY2s7cGFkZGluZy10b3A6IDU3JSI+PC9zcGFuPjxpZnJhbWUgc3JjPSJodHRwczovL3d3dy5hcGFyYXQuY29tL3ZpZGVvL3ZpZGVvL2VtYmVkL3ZpZGVvaGFzaC85dHk0VS92dC9mcmFtZSIgYWxsb3dGdWxsU2NyZWVuPSJ0cnVlIiB3ZWJraXRhbGxvd2Z1bGxzY3JlZW49InRydWUiIG1vemFsbG93ZnVsbHNjcmVlbj0idHJ1ZSIgPjwvaWZyYW1lPjwvZGl2Pg==
با سپاس از ثبت دیدگاه شما دوست عزیز
از تماشای این ویدیو لذت ببرید ...
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود فایل سخنرانی استیو جابز ...
ایبوک هدف‌گذاری موثر
زودتر از آنچه فکرش را می‌کنید به خواسته‌هایتان دست پیدا کنید!
* لینک دانلود بلافاصله ایمیل می‌شود.
چهار عامل شگفت انگیز کسب درآمد چیست؟
فقط چند ثانیه تا دانلود فاصله دارید!
* سه ایده کسب و کار خانگی پولساز
فقط چند ثانیه تا دانلود فاصله دارید!
* ایبوک: ده مکان عالی برای پیدا کردن یک ایده جدید
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود ویدیوی جذاب و با کیفیت مصاحبه جک ما
از همین امروز شروع کنید
بدون تجربه و دانش فنی وارد دنیای درآمدهای اینترنتی شوید!
فایل‌های آموزشی برای شما ایمیل می‌شود.
فقط چند ثانیه تا دریافت این فایل آموزشی فاصله دارید!
فایل‌های آموزشی ویژه اعضای سایت
* اگر عضو نیستید با وارد کردن ایمیل‌تان به این فایل دسترسی پیدا می‌کنید
دسترسی مخصوص اعضای سایت
عضو سایت نیستید؟
فقط کافیه نام و ایمیل‌تان را وارد کنید و ...
* دسترسی سریع به تمام فایل‌های آموزشی
هدیه ما به شما
با سپاس از اینکه دیدگاه تان را در سایت ما ثبت کردید.


یک کوپن تخفیف 30%
  • مشاوره حضوری
  • دوره های آنلاین
  • بسته های آموزشی
  • محصولات دانلودی
  • وبینارهای آموزشی
  این کد فقط یکبار به شما نمایش داده می‌شود.
کد: qwert
ورود کاربران
* دسترسی رایگان به بخش آکادمی