طراحی صفحه ریسپانسیو

طراحی وب ریسپانسیو (Responsive) ایجاد صفحات وب است که در همه دستگاه ها خوب به نظر می رسد!

یک طراحی وب پاسخگو به طور خودکار برای اندازه و صفحه نمایش مختلف صفحه نمایش تنظیم می شود. طراحی وب ریسپانسیو استفاده از HTML و CSS برای تغییر اندازه ، مخفی کردن ، کوچک کردن یا بزرگ کردن خودکار یک وب سایت است تا در همه دستگاه ها (دسک تاپ ، رایانه لوحی و تلفن) ظاهر خوبی داشته باشد:

ابتدا در قسمت head یک تگ meta تعریف می کنیم و دستور زیر را در آن می نویسیم:

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

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

*{
                box-sizing: border-box;
            }

حال صفحه را به ۱۲ ستون تقسیم می کنیم که از اندازه ۸.۳۳ درصد تا ۱۰۰ درصد می شوند. کد آن به صورت زیر نوشته می شود:

.col-1{width: 8.33%;}
            .col-2{width: 16.66%;}
            .col-3{width: 25%;}
            .col-4{width: 33.33%;}
            .col-5{width: 41.66%;}
            .col-6{width: 50%;}
            .col-7{width: 58.33%;}
            .col-8{width: 66.66%;}
            .col-9{width: 75%;}
            .col-10{width: 83.33%;}
            .col-11{width: 91.66%;}
            .col-12{width: 100%;}

برای تمام ستون ها یکسری شیوه نامه تعریف می کنیم:

[class*="col-"]{
                float: right;
                padding: 15px;
               
                text-align: right;
                direction: rtl;
            }

حال اندازه صفحه را در نظر می گیریم که برای این کار از media استفاده می شود. برای مثال برای پهنای صفحه نمایش کمتر از 600 پیکسل کد زیر را وارد می کنیم.

 @media only screen and (max-width: 600px){
                    [class*="col-"]{
                        width: 100%;
                    }
            }

کد فوق بیان می کند اگر اندازه پهنای صفحه نمایش کمتر از ۶۰۰ بود پهنای عناصر صفحه ۱۰۰ درصد باشد.

حال یک مثال برای صفحه وبی با دو ستون در نظر می گیریم که کد آن به صورت زیر است:

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{
                box-sizing: border-box;
            }
            .header{
                border: 1px solid red;
                text-align: center;
                direction: rtl;
            }
            .menu ul{
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            .menu li{
                padding: 8px;
                margin-bottom: 7px;
                background-color: royalblue;
                color: seashell;
            }
            .menu li:hover{
                background-color: skyblue;
                color: royalblue;
            }
            
            .col-1{width: 8.33%;}
            .col-2{width: 16.66%;}
            .col-3{width: 25%;}
            .col-4{width: 33.33%;}
            .col-5{width: 41.66%;}
            .col-6{width: 50%;}
            .col-7{width: 58.33%;}
            .col-8{width: 66.66%;}
            .col-9{width: 75%;}
            .col-10{width: 83.33%;}
            .col-11{width: 91.66%;}
            .col-12{width: 100%;}
            [class*="col-"]{
                float: right;
                padding: 15px;
               
                text-align: right;
                direction: rtl;
            }

            @media only screen and (max-width: 600px){
                    [class*="col-"]{
                        width: 100%;
                    }
            }

        </style>
    </head>
    <div class="header">
        <h1>آموزشکده امام محمدباقر</h1>
    </div>
    <div class="col-3 menu">
        <ul>
            <li>صفحه اصلی</li>
            <li>گالری عکس</li>
            <li>فروشگاه</li>
            <li>درباره ما</li>
        </ul>
    </div>
    <div class="col-9">
        <h1>صفحات ریسپانسیو</h1>
        <p>صفحات ریسپانسیو  صفحات ریسپانسیو صفحات ریسپانسیو صفحات ریسپانسیو صفحات ریسپانسیو صفحات ریسپانسیو صفحات ریسپانسیو صفحات ریسپانسیو  صفحات ریسپانسیو صفحات ریسپانسیو صفحات ریسپانسیو صفحات ریسپانسیو صفحات ریسپانسیوصفحات ریسپانسیو صفحات ریسپانسیو</p>
    </div>
</html>

حالا برنامه را اجرا کنید. با تغییر پهنا به نتیجه خواهید رسید. خروجی های زیر بدست می آیند: