18
تشکر

طراحی ریسپانسیو یک سایت دیگر

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

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

این مطلب در دسته بندی مطالب طراحی ریسپانسیو است. طراحی ریسپانسیو را در اینجا دنبال کنید.

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

البته این را نیز یادآور میشوم که بهترین کار برای یادگیری عمل کردن است.

دوباره بعضی نکات باید یادآوری شود.

برای اینکه مدیا کوئری ها و عناصر جدید HTML5 در مرورگرهای قدیمی مانند IE8 و IE7 به درستی عمل کنند ما دو کتابخانه css3-mediaqueries.js و html5shim را برای این دو مرورگر فراخوانی میکنیم.

 

همچنین متا تگ viewport برای این است که سایت ما در گوشی های هوشمند به درستی نمایش داده شود مهم است.

با این دو نکته ما ساختار صفحه مان را به صورت زیر مینویسیم.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Demo | Responsive Web</title>
    <meta name="viewport" content="width=device-width, minimumscale=1.0, maximum-scale=1.0" />
    <link href="style.css" type="text/css" rel="stylesheet">
    <!--&#91;if lt IE 9&#93;>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <!&#91;endif&#93;-->
    <script type='text/javascript' src='scripts/respond.min.js'></script>
</head>
<body>
    <div id="wrapper">
        <header>
            <nav id="skipTo">
                <ul>
                    <li>
                        <a href="#main" title="Skip to Main Content">Skip to Main Content</a>
                    </li>
                </ul>
            </nav>
            <h1></h1>
            <nav>
                <ul>
                    <li><a href="#" title="Home">Home</a></li>
                    <li><a href="#" title="About">About</a></li>
                    <li><a href="#" title="Work">Work</a></li>
                    <li><a href="#" title="Contact">Contact</a></li>
                </ul>
            </nav>
            <div id="banner">
                <img src="1.jpg" alt="banner" />
            </div>
        </header>
        <section id="main">
            <h1>Main section</h1>
            <p>
                Lorem &hellip;
            </p>
        </section>
        <aside>
            <h1>Sub-section</h1>
            <p>
                Lorem &hellip;
            </p>
        </aside>
    </div>
</body>
</html>

خب در زیر ما به جای استفاده از px از درصد استفاده کردیم. و همین نکته بیشترین کمک را به ما میکند. اگر شما پس از چسباندن کد زیر به صفحه عرض مرورگر را کم و زیاد کنید میبینید که سایت خودش را با عرض مرورگر وفق میدهد.

#wrapper {
    width: 96%;
    max-width: 920px;
    margin: auto;
    padding: 2%;
}
#main {
    width: 60%;
    margin-right: 5%;
    float: left;
}
aside {
    width: 35%;
    float: right;
}
header h1 {
    height: 70px;
    width: 160px;
    float: left;
    display: block;
    background: url(demo.gif) 0 0 no-repeat;
}
header nav {
    float: right;
    margin-top: 40px;
}
header nav li {
    display: inline;
    margin-left: 15px;
}
#skipTo {
    display: none;
}
#skipTo li {
    background: #b1fffc;
}
#banner {
    float: left;
    margin-bottom: 15px;
    width: 100%;
}
#banner img {
    width: 100%;
}

دو عکس در صفحه قرار دارد که شما میتوانید آنها را از اینجا و اینجا دریافت کنید و در کنار صفحه قرار دهید.

خب میبینید که کار بسیار آسان است. و تقریبا تمام شده است.

اما ما میخواهیم زمانی که کاربر ما از گوشی های هوشمند استفاده میکند یک منو برای دسترسی به کاربر نشان دهیم. که در واقع اینکار را به تبدیل nav صفحه بالا انجام میدهیم.

@media screen and (max-width: 480px) {
    #skipTo {
        display: block;
    }
    header nav, #main, aside {
        float: left;
        clear: left;
        margin: 0 0 10px;
        width: 100%;
    }
    header nav li {
        margin: 0;
        background: #efefef;
        display: block;
        margin-bottom: 3px;
    }
    header nav a {
        display: block;
        padding: 10px;
        text-align: center;
    }
}

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

  • زهرا می‌گه:

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

  • محمد می‌گه:

    اقا ممنون و مچکر

  • شایان می‌گه:

    مرسی آقای محسن،آموزشات خوب هستن و کمک کننده :)

  • mahsa می‌گه:

    respond.min.js برای چی در صفحه گذاشتین؟ مگه این مدل طراحی نیاز به جاوااسکریپت داره؟

    • mohsen_shafiee می‌گه:

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


  • نظرات این مطلب بسته است.