آموزش طراحی ریسپانسیو‎

در این مطلب به آموزش پایه ای طراحی ریسپانسیو خواهیم پرداخت.

برای آنکه بتوانیم یک سایت ریسپانسیو را درست به کاربر نمایش دهیم باید ابتدا اندازه نمایشگر کاربر را بگیریم و مطابق با اندازه نمایگشر کاربر, سایت را نمایش دهیم.

نترسید. ما برای همه نمایشگرها طراحی جداگانه ای انجام نمیدهیم. فقط برای نمایشگرهایی با اندازه های پایین:

۳۲۰px (نمایشگرهایی که کمترین عرضشان ۳۲۰px است).

۴۸۰px (نمایشگرهایی که کمترین عرضشان ۴۸۰px است).

۶۰۰px (نمایشگرهایی که کمترین عرضشان ۶۰۰px است).

۷۶۸px (نمایشگرهایی که کمترین عرضشان ۷۶۸px است).

۹۰۰px (نمایشگرهایی که کمترین عرضشان ۹۰۰px است).

۱۲۰۰px (نمایشگرهایی که کمترین عرضشان ۱۲۰۰px است).

خب تا اینجا شما با کل کاری که در آینده خواهید کرد آشنا شدید.

حالا نوبت به تشخیص عرض نمایشگرها فرا رسیده:

شما به دوصورت قادر به انجام این کار هستید. راه اول در گذاشتن فایل های CSS جدا برای هر نمایشگر. در این روش وقتی از طریق تگ link فایل استایل را به صفحه وصل میکنید با استفاده از خاصیت media اندازه نمایشگر را مشخص میکنید:

<link rel="stylesheet" media="screen and (min-width: 480px) href=" />

در نوع دوم شما در خود فایل CSS اندازه نمایشگر را مشخص میکنید:

@media screenand (min-width: 480px) {


    .content {


        float: left;


    }


    .social_icons {


        display: none


    }

}

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