طراحی وب Responsive در HTML
با استفاده از Respnsive میتوانید صفحه های وبی را طراحی کنید که روی همه دستگاه ها به خوبی نمایش داده شود .
یک طراحی وب Responsive به صورت خود کار برای اندازه های مختلف صفحه نمایش و درگاه های دید گوناگون تنظیم میشود .
طراحی وب Responsive چیست ؟
طراحی وب با Responsive با استفاده از HTML و CSS برای تغییر اندازه خودکار ، پنهان کردن ، کوچک نمایی و بزرگ نمایی وبسایت تا درهمه دستگاه ها ( دسکتاپ ، تبلت و گوشی) خوب جلوه دهد :
تنظیم ViewPort
برای ساخت یک صفحه وب Responsive میتوانید از تگ <meta> استفاده کنید :
<meta name="viewport" content="width=device-width, initial-scale=1.0">با این کار نمای صفحه شما تنظیم می شود که به مرورگر دستورالعمل هایی در مورد نحوه کنترل ابعاد و مقیاس صفحه ارائه می دهد.
در اینجا یک مثال از یک صفحه وب بدون تگ متا viewport و همان صفحه وب با تگ متا viewport آورده شده است:
تصاویر Responsive
تصاویر Responsive، تصاویری هستند که به خوبی برای هر اندازه مرورگر اندازه می‌شوند.
با استفاده از ویژگی width
اگر ویژگی عرض CSS روی 100٪ تنظیم شود، تصویر پاسخگو خواهد بود و مقیاس آن را بالا و پایین می کند:
<img src="img_girl.jpg" style="width:100%;">
نکته: توجه داشته باشید که در مثال بالا، تصویر را می توان بزرگتر از اندازه اصلی آن بزرگ کرد. راه حل بهتر، در بسیاری از موارد، استفاده از ویژگی max-width به جای آن خواهد بود.
با استفاده از ویژگی max-width
اگر ویژگی max-width روی 100% تنظیم شود، در صورت لزوم، تصویر کوچک میشود، اما هرگز بزرگتر از اندازه اصلی خود نمی شود:
<img src="img_girl.jpg" style="max-width:100%;height:auto;">نمایش عکس های متفاوت با توجه به عرض مرورگر (width)
عنصر <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>اندازه متن Responsive
اندازه متن را می توان با واحد "vw" تنظیم کرد که به معنای "عرض دید درگاه" است.
به این ترتیب اندازه متن از اندازه پنجره مرورگر پیروی می کند:
<h1 style="font-size:10vw">Hello World</h1>
نکته: Viewport اندازه پنجره مرورگر است. 1vw = 1% از عرض درگاه دید. اگر وسعت دید 50 سانتی متر باشد، 1vw 0.5 سانتی متر است.
خلاصه درس
تمرین
احسان اسلامی
