صفحه نخست » مقالات » برنامه نویسی » آموزش HTML » وب سایت رسپانسیو

وب سایت رسپانسیو

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 2 دقیقه 28 آبان 1399
وب سایت رسپانسیو

در این مقاله بیشتر با وب سایت رسپانسیو در HTML و نحوه کارایی آن آشنا خواهیم شد.

وب سایت رسپانسیو چیست؟

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

وب سایت رسپانسیو

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

انتظار می رود که هر وب سایت مدرنی مورد پسند کاربر باشد، یعنی دسترسی و استفاده در هر دستگاهی آسان باشد. برای دستیابی به آن ، باید فهمید یک وب سایت واکنش گرا چیست:

همان طور که در تصویر می بینید ، تغییر اندازه تصاویر و متن اغلب با توجه به اندازه و وضوح صفحه نمایش کافی نیست. اصلی ترین نیاز برای طراحی واکنش گرا (یا انطباقی) خوانایی و زیبایی طرح ها است. بنا براین ، گاهی اوقات عناصر به اطراف منتقل می شوند تا تجربه کاربری بهتری ایجاد کنند.

تنظیم viewport

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

این تنظیم نیاز به افزودن عنصر <meta> در بخش <head> خود دارد:

<meta name="viewport" content="width=device-width">

توجه: در وب سایت رسپانسیو لازم نیست عرض دستگاه را تعیین کنید: می توانید به سادگی با افزودن width عرض دستگاه را با عرض وب سایت و صفحه نمایش مطابقت دهید.

در جدول زیر تمام خصوصیات موجود برای محتوای ذکر شده و تعریف شده را خواهید دید:

تعریفویژگی
ارتفاع صفحه دستگاهdevice-height
عرض صفحه دستگاهdevice-width
ارتفاع نمای مجازیheight
بزرگنمایی اولیه (اگر روی 1.0 تنظیم شود بزرگنمایی نمی شود)initial-scale
قوی ترین بزرگنمایی ممکن (اگر روی 1.0 تنظیم شود بزرگنمایی نمی شود)maximum-scale
ضعیف ترین بزرگنمایی ممکن (اگر روی 1.0 تنظیم شود بزرگنمایی نمی شود)minimum-scale
بزرگنمایی را مجاز یا ممنوع می کندuser-scalable
عرض نمای مجازیwidth

درک نحوه ایجاد یک وب سایت رسپانسیو به بهینه سازی وب سایت شما برای موتورهای جستجوگر نیز کمک می کند. طبق گفته و عملکرد گوگل، هر صفحه بهینه شده برای استفاده در صفحه نمایش های با اندازه های مختلف باید برای طراحی وب سایت دارای تگ meta viewport در کد HTML خود باشد.

نکات مهم وب سایت رسپانسیو چیست؟

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

دوره رایگان html را در دویکس دنبال کنید.

چه امتیازی به این مقاله می دید؟

5 / 5.00
[ 1 رای ]
مطالب مشابه

Related Posts