4 گام سریع برای ریسپانسیو کردن وب سایت

طراحی وب ریسپانسیو به عنوان یک مفهوم دارد الان خیلی وقته که هست; در واقع، امروزه این روش واقعی ساختن وب سایت است. همین الان مردم با تلفن همراه به وب سایت ها دسترسی پیدا می کنند بیش از هر دستگاه دیگری، بنابراین بسیار مهم است که مطمئن شوید که وب سایت شما برای صفحه نمایش های کوچک و بزرگ مناسب است.

یادآوری اصول اولیه مفید است، بنابراین در این مقاله به 4 جنبه از HTML و CSS خواهیم پرداخت که یک وب سایت را واکنش گرا می کند.

اینها مناطقی هستند که ما روی آنها تمرکز خواهیم کرد – آنها به عنوان نوعی چک لیست عمل می کنند:

1. درگاه دید
2. داستان های رسانه
3. رسانه ها
4. ظروف پاسخگو

1. متا تگ Viewport را بررسی کنید

Viewport ناحیه قابل مشاهده یک صفحه وب در دستگاه است. اولین قدم برای واکنش گرا کردن وب سایت شما این است که مطمئن شوید که وب سایت به طور دقیق در تمام صفحه ها مقیاس بندی می شود.

متا تگ viewport برای تنظیم مقیاس viewport استفاده می شود:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width عرض نمای درگاه را با عرض دستگاهی که صفحه وب در آن بارگذاری می شود تنظیم می کند. initial-scale=1 نما را روی مقیاس بزرگنمایی 1 (یا 100٪) از عرض دستگاه تنظیم می کند.

“بدون یک متا تگ viewport، دستگاه های تلفن همراه صفحات را در عرض صفحه دسکتاپ معمولی رندر می دهند و سپس صفحات را کوچک می کنند که خواندن آنها را دشوار می کند.” – web.dev

واقعیت دیگری که باید به آن توجه کرد این است که <meta name="viewport"> برچسب توسط موتورهای جستجو جستجو می شود تا مشخص شود که یک وب سایت تا چه حد برای موبایل مناسب است به طور مستقیم بر سئو سایت شما تاثیر می گذارد.

2. پرسش های رسانه ای دوست شما هستند

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

آ پرس و جو رسانه ای برای تغییر سبک صفحه وب در اندازه های مختلف صفحه استفاده می شود. از @media قانون برای تعریف شرایطی که برای آن استایل CSS باید اعمال شود. قانون رسانه شامل یک نوع رسانه و یک ویژگی رسانه است، در قالب:

@media screen and (max-width: 768px) {...}

درخواست رسانه بالا برای صفحات وب روی صفحه‌ای با حداکثر عرض 768 پیکسل اعمال می‌شود.

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

از Mobile-First Design استفاده کنید

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

همچنین، صفحه‌نمایش‌های موبایل معمولاً طرح‌بندی ساده‌تری دارند که به این معنی است که ساختن از یک پایه تلفن همراه ساده‌تر از شکستن طرح‌بندی پیچیده دسک‌تاپ برای صفحه‌نمایش‌های موبایل است.

اگر بخواهیم چیدمان تصویر بالا را برای صفحه نمایش موبایل بازسازی کنیم، چیزی شبیه به این خواهد بود:

<nav></nav>
<aside></aside>
<main>
  <header></header>
  <article></article>
  <article></article>
  <article></article>
</main>

nav {
  width: 100%;
  height: 50px;
  background-color: #4282aa;
  margin-bottom: 8px;
}

aside {
  display: none;
}

main {
  width: 100%;
}

header {
  width: 100%;
  height: 200px;
  background-color: #0F1C37;
  margin-bottom: 8px;
}

article {
  width: 100%;
  height: 100px;
  background-color: #8CB89F;
  margin-bottom: 8px;
}

اکنون که استایل پایه را پایین آورده ایم، می توانیم آن را به صفحه نمایش های بزرگتر گسترش دهیم. ما از شرط «حداقل عرض» به جای شرط «حداکثر عرض» استفاده خواهیم کرد. این امر حکم می‌کند که وقتی یک صفحه به حداقل عرض ۷۶۸ پیکسل رسید، می‌توانیم سبک‌های پیچیده‌تری را معرفی کنیم. استایل چیدمان صفحه تبلت به این صورت است:

@media (min-width: 768px) {
  main {
    display: flex;
    flex-wrap: wrap;
  }
  
  header {
    flex: 1 0 100%;
  }
  
  article {
    flex: 1 0 30%;
    margin-right: 8px;
  }
  
  article:last-child {
    margin-right: 0;
  }
}

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

@media (min-width: 1024px) {
  aside {
    display: block;
    float: left;
    width: calc(30% - 8px);
    background-color: #175873;
    height: 308px;
    margin-right: 8px;
  }
  
  main {
    width: 70%;
    float: left;
  }
}

3. رسانه پاسخگو مهم است!

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

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

می‌توانیم با تنظیم از رسانه‌هایی که بزرگ‌تر از اندازه صفحه وب هستند جلوگیری کنیم max-width ویژگی در CSS:

img,
video {
  max-width: 100%;
}

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

برای اطلاعات بیشتر در مورد روش های مختلف جاسازی فیلم ها این پست در ترفندهای CSS را بررسی کنید.

ارائه تصاویر مختلف بر اساس اندازه صفحه نمایش

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

مفهوم ارائه تصاویر مختلف با استفاده از پرس و جوهای رسانه ای را می توان با picture برچسب زدن

<picture>
  <source srcset=" media="(min-width: 1024px)">
  <source srcset=" media="(min-width: 768px)">
  <img src=" alt="background">
</picture>

در این کد منبع پیش فرض برای img برچسب به عنوان کوچکترین تصویر تنظیم شده است. در source تگ ها تگ img src را با صحیح به روز می کند srcset وقتی که media شرط برقرار است

برای مشاهده نحوه به روز رسانی تصاویر بر اساس اندازه صفحه نمایش، اندازه نسخه نمایشی زیر را تغییر دهید (در اینجا آمده است نسخه تمام صفحه برای بازی):

4. ظروف پاسخگو برای چیدمان بهتر

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

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

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

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

.container {
  max-width: 900px;
  width: 100%;
  margin: auto;
}

ظرف یک max-width ارزش گذاری می کند و استفاده می کند auto حاشیه برای قرار دادن محتوا در مرکز.

را اضافه می کنیم container کلاس به محتوا در نشانه گذاری ما:

<header>
  <div class="container">
    <h1>Responsive Containers</h1>
    <p>Create content for large screens</p>
  </div>
</header>
<main class="container">
  <h2>Lorem Ipsum</h2>
    <img src="" />
    <p>Lorem ipsum dolor</p>
</main>

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

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

برای طرح‌بندی‌های مدرن سطح بعدی، می‌توانید از شبکه CSS نیز استفاده کنید. راهنمای مبتدیان ما را بررسی کنید:

• 

  طرح بندی شبکه CSS

  CSS Grid Layout: راهنمای شروع سریع

  ایان یتس

نتیجه

به طور خلاصه، برای ریسپانسیو کردن یک وب سایت، باید:

1. تگ meta viewport را روی مقیاس تنظیم کنید
2. از پرسش‌های رسانه‌ای برای طراحی طرح‌بندی‌های مختلف استفاده کنید
3. حداکثر عرض را برای رسانه در صفحه تنظیم کنید تا از سرریز شدن آن جلوگیری کنید
4. از ظروف برای قرار دادن محتوا در صفحه نمایش های بزرگتر و کوچک شدن در صفحه نمایش های کوچکتر استفاده کنید.

خواندن بیشتر پاسخگو