یعنی چه؟ HTML Responsive
از آنجاییکه در پلتفرمهای مختلف با اندازه های مختلف صفحه وب میتواند متفاوت نمایش داده شود از HTML Responsive با هدف ایجاد نمایش یکسان در تمامی پلتفرمها استفاده میشود.
در صفحات وبHTML Responsive اعمال تنظیمات
برای اعمال تنظیمات HTML Responsive بر روی صفحات وب تگ <meta> را مانند کد زیر در تمامی صفحات اعمال میکنیم.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> در شکل زیر تفاوت استفاده از تگ <meta> و عدم استفاده از آن را مشاهده میکنید.
عدم استفاده از تگ meta
استفاده از تگ meta
بجز استفاده از تگ <meta> میتوان در تنظیمات css از style=width:100% نیز استفاده کرد که در این صورت تصویر متناسب با اندازه صفحه وب بزرگ یا کوچک میشود. توجه کنید که متناسب با اندازه صفحه پلتفرم ممکن است تصویر بزرگتر از سایز اصلیش نمایش داده شود که برای حل این مشکل از style=max- width:100% استفاده کرد. در مثال زیر طرز استفاده از این دو روش نشان داده شده است.
<img src=”myimage.jpg” style=”width:100%;”>
<img src=”myimage.jpg” style=”max-width:100%;height:auto;”>
بطور مشابه میتوان این خاصیت مقیاس پذیری را بر روی متن نیز اعمال کرد. برای این کار باید از vw که مخفف viewreport width است استفاده کرد.
<h1 style=”font-size:10vw”>Hello World</h1>