طراحی وب

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

مثال:

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

 

 

 

برچسب ها

دیدگاهتان را بنویسید

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

پیشنهاد ویژه

تا 75% ذخیره کنید

این آخرین فرصت استفاده از تخفیف 75% است
این پیشنهاد را ببینید
این پیشنهاد فقط یکبار به شما نمایش داده می‌شود !
close-link
بستن