صفحه اصلی نمونه کارها دستورات ریسپانسیو

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

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

استاد :

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

مدیاکوئری

اول بگیم ریسپانسیو چیه

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

من کد زیر رو مینویسم :




    عامرتجارت خلیج فارس
    
    


    

و خروجی این کد :

ریسپانسیو

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

مثلا کد رو برو رو ببینید:

@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 ببینید:

توضیح متاتگ اول کد و بازی با سایز مرورگر و همچنین دیدن خروجی واقعی توی کد رو در آموزش زیر:

متا تگ viewport و استفاده در طراحی ریسپانسیو

سوالی دارید؟ از من بپرسید

سلام چطور میتونم کمکتون بکنم؟