دستورات ریسپانسیو
نویسنده : مریم شیردل
مدیاکوئری اول بگیم ریسپانسیو چیه اینکه سایت ما نه فقط در دسکتاپ بلکه در گوشی یا تبلت هم ظاهر خوبی داشته باشد و محتوا به خوبی دیده شوند. من کد زیر رو مینویسم :
مدیاکوئری
اول بگیم ریسپانسیو چیه
اینکه سایت ما نه فقط در دسکتاپ بلکه در گوشی یا تبلت هم ظاهر خوبی داشته باشد و محتوا به خوبی دیده شوند.
من کد زیر رو مینویسم :
عامرتجارت خلیج فارس
و خروجی این کد :
حالا با استفاده از مدیاکوئری به استایل ها میگم توی سایز نمایشگر گوشی ویژگی خاصی داشته باشند.
مثلا کد رو برو رو ببینید:
@media (max-width: 900px) {
.container {
background-color: #00ff90;
}
}
با استفاده از مدیا کوئری به عنصر درون کدم که داشتم با کلاس .container گفتم وقتی بیشترین (max) سایز نمایشگر 900px بود ...
ویژگی background-color در کلاس .container تغییر بکند
حتی میتونستم به برای زمانی که کمترین عرض نمایشگر 1200px بود ، یعنی سایزش بزرگتر از 1200px بود تغییراتی اعمال کنم
@media (min-width:1200px) {
.container {
background-color: #00ff90;
}
}
یا حتی برای وقتی که سایز مرورگر بین 900px تا 1000px است . به عبارت دیگه وقتی کمترین عرض مرورگر 900px و بیشترین عرض مرورگر 1000px است .
@media (min-width:900px) and (max-width:1000px) {
.container {
background-color: #00ff90;
}
}
خب حالا برگردیم سراغ صفحه وبمون.من میخوام اون سه باکس که به صورت افقی کنار هم هستند ، در صفحه گوشی زیر هم باشند و به خوبی دیده بشن
پس با مدیا بهشون width:100% میدم در سایز کمتر از 900px
برای دیده شدن بهتر رنگ های صفحه رو عوض میکنم توی سایز های مختلف
عامرتجارت خلیج فارس
خروجی کد رو در صفحه نمایش با عرض 360px ببینید:
توضیح متاتگ اول کد و بازی با سایز مرورگر و همچنین دیدن خروجی واقعی توی کد رو در آموزش زیر: