خواندن ۵ دقیقه·۲ سال پیش

آشنایی با Responsive Web Design و CSS Media Query ها

سلام سلام

تو این مقاله نیم نگاهی به مبحث بسیار مهم Responsive Web Design (طراحی وب بصورت ریسپانسیو) و نحوه پیاده سازی اون خواهیم داشت.

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

به عنوان مثال به تصویر زیر نگاه کنید که صفحه اول یکی از وبسایت های خودم هست و تو حالت عادی با browser باز شده (به عرض صفحه و وسط چین بودن محتویات صفحه دقت کنید):

حالا اگه همین وبسایت رو توی سایز تبلت باز کنیم به اینصورت عوض میشه(عرض صفحه 100 درصد شده و منوی بالای سایت مخفی شده و تبدیل شده به یه دکمه)

و اما اگر با گوشی موبایل این وبسایت رو باز کنید میبینم که نوشته های سمت راست اسلایدر به بالای اون منتقل میشن و عرض 100% میگیرن و همچنین یه منوی اینستاگرام طور اون پایین ظاهر میشه:

خب فکر کنم با همین مثال ساده مفهوم جا افتاد درسته؟ ما تو سایزهای مختلف میایم و مدیریت میکنیم که محتویات وبسایتمون دقیقا اونجوری که میخوایم نمایش داده بشه.

خب چطور پیاده سازی کنیم؟

تقلب: لینک مثال پیش رو بصورت پیاده سازی شده

اینجاس که مدیا کوئری ها وارد میدون میشن و کمک میکنن که به بهترین حالت ممکن ریسپانسیو بودن رو پیاده سازی کنیم. اول یه پوشه میسازیم و دو فایل با نام های index.html و style.css رو میسازیم برای نوشتن کدهامون. بعد آدرس فایل استایل ها رو تو فایل index اضافه میکنیم. تا این مرحله باید فایل style.css خالی باشه و محتویات فایل index.html باینصورت باشه:

میبینیم که فایل خالی هست و هنوز هیچی نداره. برای شروع میایم و یه div با کلاس container میسازیم و داخلش هم چهارتا div با یه سری کلاس.

اینجا به روش های مختلفی میشه کار کرد و من برای این مقاله آموزش از دوتا کلاس استفاده میکنم که نحوه کارکردشون رو ببینیم. پس به همه شون کلاس box رو میدم و همچنین برای هرکدوم یه کلاس دلخواه هم میدم مثلا box1, box-2, box3, box-4. پس تا اینجا درون فایل index.html باید کدهای زیر اضافه شده باشن:

<body>
    <div class=&quotcontainer&quot>
        <div class=&quotbox box-1&quot></div>
        <div class=&quotbox box-2&quot></div>
        <div class=&quotbox box-3&quot></div>
        <div class=&quotbox box-4&quot></div>
    </div>
</body>

حالا به سراغ استایل دهی میریم. اول CSS RESET رو انجام میدیم.(اگه نمیدونید چیه این مقاله رو بخونید). و یه رنگ ساده هم به تگ بادی میدیم که بعدا بتونیم اون رو تو حالت ریسپانسیو تغییر بدیم:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #ccc;
}

بعدش برای کلاس container میایم و flex رو انتخاب میکنیم که خیلی برای کار با حالت ریسپانسیو باحاله. حالت نمایش فرزندانش رو هم سطری انتخاب میکنیم:

.container {
    background-color: #ccc;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

حالا میایم برای کلاس box عرض 100%و ارتفاع 200 پیکسل رو انتخاب میکنیم . به هرکدوم از بچه ها هم یه رنگ دلخواه میدیم. تا الان باید فایل style.css به اینصورت شده باشه:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    background-color: #ccc;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.box {
    width: 100%;
    height: 200px;
}
.box-1 {
    background-color: red;
}
.box-2 {
    background-color: green;
}
.box-3 {
    background-color: blue;
}
.box-4 {
    background-color: black;
}

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

خب حالا بریم اینو ریسپانسیو کنیم. من میخوام مثلا تو حالت معمولی (دسکتاپ) همین جوری ببینم ولی وقتی تو حالت تبلت میرم این باکس ها بیفتن زیر هم و هرکدوم هم نهایتا 50 درصد عرض صفحه رو بگیرن. همچنین رنگ بک گراندم هم بنفش بشه. با فرض اینکه حداکثر عرض تبلت من 800 پیکسل باشه یه کوئری مینویسم بصورت زیر:

@media all and (max-width: 800px) {
  body {
    background-color: blueviolet;
  }
  .container {
    flex-direction: column;
  }
  .box {
    width: 50%;
  }
}

ولی چیکار کردیم؟ اومدیم تو خط اول گفتیم برای حالتهایی که حداکثر عرض صفحه 800 پیکسل بود این کدهای داخلت رو اعمال کن در غیر اینصورت اونها رو اعمال نکن. داخلش هم اومدیم تغییرات دلخواهمون رو دادیم. حالا اگه عرض صفحه مرورگر وب رو تغییر بدیم و اون رو به سایزی کمتر از 800 پیکسل ببریم با حالت زیر مواجه میشیم:

باحال شد نه؟ همون جوری که میخواستیم تغییرات اعمال شدن.

حالا بریم و بازهم بهترش کنیم. فرض کنیم من میخوام تو سایز موبایل (یعنی مثلا فرض کنیم حداکثر 500 پیکسل) بازهم نحوه نمایش متفاوت باشه. این دفعه دیگه کار راحت تر هست:

@media all and (max-width: 500px) {
  body {
    background-color: rgb(105, 216, 201);
  }
  .container {
    flex-direction: column;
  }
  .box {
    width: 90%;
  }
}

ایندفعه چیکار کردیم؟ اومدیم و گفتیم اگر سایز صفحه حداکثر 500 پیکسل بود این تغییرات رو اعمال کن یعنی بیا و یه رنگ تقریبا ابی نیلی به بک گراند بده و همچنین عرض باکس ها رو هم 90 درصد در نظر بگیر. بریم ببینیم آیا کار میکنه؟

بله. تو سایز 499 پیکسل میبینم که تغییرات دلخواه ما اعمال شد و اگر الان سایز رو بببریم بالاتر بازهم تغییرات ما طبق کوئری هایی که تعریف کردیم کار میکنن.

فایل نهایی style.css باید بصورت زیر شده باشه:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    background-color: #ccc;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.box {
    width: 100%;
    height: 200px;
}
.box-1 {
    background-color: red;
}
.box-2 {
    background-color: green;
}
.box-3 {
    background-color: blue;
}
.box-4 {
    background-color: black;
}
@media all and (max-width: 800px) {
  body {
    background-color: blueviolet;
  }
  .container {
    flex-direction: column;
  }
  .box {
    width: 50%;
  }
}
@media all and (max-width: 500px) {
  body {
    background-color: rgb(105, 216, 201);
  }
  .container {
    flex-direction: column;
  }
  .box {
    width: 90%;
  }
}

جمع بندی:

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

و من الله توفیق

لینک کدها بصورت کامل

web design media query responsive frontend css

محمد طاهری

شاید از این پست‌ها خوشتان بیاید