طراحی وب پاسخگو HTML

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

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

 

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

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

 

تنظیم درگاه مشاهده ( viewport )

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">
امتحان کنید

 

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

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

 

ساخته شود ( https://www.w3schools.com/html/html_responsive.asp )

 

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

 

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

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

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

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

 

 

<img src="img_girl.jpg" style="width:100%;">
امتحان کنید

 

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

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

اگر ویژگی حداکثر عرض روی 100٪ تنظیم شود ، در صورت لزوم ، تصویر پایین می آید ، اما هرگز اندازه آن بزرگتر از اندازه اصلی نیست:

 

 

<img src="img_girl.jpg" style="max-width:100%;height:auto;">
امتحان کنید