رسپانسیو دیزاین: مدیا کوئری و بوتسترپ d-none

19 خرداد 1400 برچسب‌ها:,

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

اگر فقط میخواهید از css استفاده کنید میتوانید از media query استفاده کنید. اگر با فلکس باکس کار میکنید باید از flex-wrap: wrap استفاده کنید. اگر با بوتسترپ این کار را انجام میدهید، از کلاس های d-none و d-md-block و … بهره ببرید.

نمونه استفاده از مدیا کوئری

@media (min-width: 540px) and (max-width: 960px) { ... }

نمونه استفاده از بوتسترپ

<div class="d-none d-md-block">

نمونه استفاده از فلکس باکس (بدون بوتسترپ)

.elem{
  display: flex;
  flex-wrap: wrap;
}

نمونه استفاده از فلکس باکس (با بوتسترپ)

<div class="d-flex flex-wrap">

متا تگ ویو پورت

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

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

نتیجه

به کدهای ریپوسیتوری گیتهاب مراجعه کنید و انها را در بروزر خود ببینید تا بهتر متوجه این قضیه بشوید!

کدهای نهایی در گیتهاب

این کدها در ویدیو زیر تست شده اند، تماشا کنید!