cssطراحی سایت

جلسه ۶۲: طراحی رسپانسیو با Flexbox در CSS

طراحی رسپانسیو با Flexbox

  ul {
        list-style-type: none;
        display: flex;
        border: 1px solid #4e4e4e;
    }

    li {
        flex: 0 0 auto;
        padding: 10px;
        margin: 10px;
        background-color: #8cacea;
        color: #fff;
        font-size: 1em;
    }

شما اکنون در این موارد نرم افزار حرفه ای هستید ، بنابراین می فهمید که آنجا چه خبر است. بنابراین ، نوار پیمایش چگونه به نظر می رسد.

ul {
            list-style-type: none;
            display: flex;
            border: 1px solid #4e4e4e;
        }

li {
            flex: 0 0 auto;
            padding: 10px;
            margin: 10px;
            background-color: #8cacea;
            color: #fff;
            font-size: 1em;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Simple responsive Flex show</title>

</head>

<body>

  <ul>

    <li>Home</li>

    <li>About</li>

    <li>Contact</li>

    <li>Register</li>

    <li>Login</li>

  </ul>

</body>

</html>

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

@media screen and (max-width: ۷۶۹px) {

    /* code here only applies to screen devices that have a width lesser than ۷۶۹px*/

    ul {

        flex-direction: column; /* On smaller devices, switch the direction*/

    }

}

ul {
            list-style-type: none;
            display: flex;
            border: 1px solid #4e4e4e;
        }

li {
            flex: 0 0 auto;
            padding: 10px;
            margin: 10px;
            background-color: #8cacea;
            color: #fff;
            font-size: 1em;
        }

        /*====================================
        Resize browser to see at work
        ======================================*/
        
@media screen and (max-width: 769px) {
ul {
                flex-direction: column;
            }
}

<!DOCTYPE html>

<html>

<head>

    <title>Simple responsive Flex show</title>

</head>

<body>

  <ul>

    <li>Home</li>

    <li>About</li>

    <li>Contact</li>

    <li>Register</li>

    <li>Login</li>

  </ul>

</body>

</html>

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

Media Queries

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

@media screen and (max-width: ۳۰۰px) {

  /*write your css in this code block*/

}

با نگاه کردن به آن ، تقریباً می توانید حدس بزنید که چه کاری انجام می شود. “برای یک دستگاه صفحه نمایش با حداکثر عرض ۳۰۰ پیکسل … این کار را انجام دهید” هر استایل درون بلوک کد فقط در دستگاه هایی اعمال می شود که با بیان ، صفحه نمایش و (حداکثر عرض: ۳۰۰ پیکسل) مطابقت داشته باشند من حدس می زنم که این کمک کرد تا برخی از سردرگمی ها پاک شود. شما تقریباً در پایان هستید! در درس پایان ، من در مورد پشتیبانی مرورگر ، پیوندهای مفید و منابع برای جابجایی شما بحث می کنم. من مطمئنم که شما آن را دوست دارید

کتابهایی در زمینه طراحی پاسخگو نوشته شده اند ، کتابهای خوبی در این زمینه است. از آنجا که این دوره بر روی مدل Flexbox متمرکز است ، من عمیقاً در وضعیت کلی طراحی های پاسخگو فرو نمی روم. همانطور که قبلاً در جایی بیان کردم ، ما با مدل flexbox مقداری از پاسخگویی خارج می شویم. Flexbox همانند “جعبه انعطاف پذیر” است. با این حال ، می توان اندازه های مختلف صفحه را از طریق پرس و جوهای رسانه ای هدف قرار داد و سپس رفتار انعطاف پذیر را تغییر داد. در اینجا مثالی است. لیست نامناسب دستی دوباره به کمک می آید:

  <ul>

    <li>Home</li>

    <li>About</li>

    <li>Contact</li>

    <li>Register</li>

    <li>Login</li>

  </ul>

و با کمی استایل:

  ul {
        list-style-type: none;
        display: flex;
        border: 1px solid #4e4e4e;
    }

    li {
        flex: 0 0 auto;
        padding: 10px;
        margin: 10px;
        background-color: #8cacea;
        color: #fff;
        font-size: 1em;
    }

شما اکنون در این موارد نرم افزار حرفه ای هستید ، بنابراین می فهمید که آنجا چه خبر است. بنابراین ، نوار پیمایش چگونه به نظر می رسد.

ul {
            list-style-type: none;
            display: flex;
            border: 1px solid #4e4e4e;
        }

li {
            flex: 0 0 auto;
            padding: 10px;
            margin: 10px;
            background-color: #8cacea;
            color: #fff;
            font-size: 1em;
        }

<!DOCTYPE html>

<html>

<head>

    <title>Simple responsive Flex show</title>

</head>

<body>

  <ul>

    <li>Home</li>

    <li>About</li>

    <li>Contact</li>

    <li>Register</li>

    <li>Login</li>

  </ul>

</body>

</html>

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

@media screen and (max-width: ۷۶۹px) {

    /* code here only applies to screen devices that have a width lesser than ۷۶۹px*/

    ul {

        flex-direction: column; /* On smaller devices, switch the direction*/

    }

}

ul {
            list-style-type: none;
            display: flex;
            border: 1px solid #4e4e4e;
        }

li {
            flex: 0 0 auto;
            padding: 10px;
            margin: 10px;
            background-color: #8cacea;
            color: #fff;
            font-size: 1em;
        }

        /*====================================
        Resize browser to see at work
        ======================================*/
        
@media screen and (max-width: 769px) {
ul {
                flex-direction: column;
            }
}

<!DOCTYPE html>

<html>

<head>

    <title>Simple responsive Flex show</title>

</head>

<body>

  <ul>

    <li>Home</li>

    <li>About</li>

    <li>Contact</li>

    <li>Register</li>

    <li>Login</li>

  </ul>

</body>

</html>

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

Media Queries

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

@media screen and (max-width: ۳۰۰px) {

  /*write your css in this code block*/

}

با نگاه کردن به آن ، تقریباً می توانید حدس بزنید که چه کاری انجام می شود. “برای یک دستگاه صفحه نمایش با حداکثر عرض ۳۰۰ پیکسل … این کار را انجام دهید” هر استایل درون بلوک کد فقط در دستگاه هایی اعمال می شود که با بیان ، صفحه نمایش و (حداکثر عرض: ۳۰۰ پیکسل) مطابقت داشته باشند من حدس می زنم که این کمک کرد تا برخی از سردرگمی ها پاک شود. شما تقریباً در پایان هستید! در درس پایان ، من در مورد پشتیبانی مرورگر ، پیوندهای مفید و منابع برای جابجایی شما بحث می کنم. من مطمئنم که شما آن را دوست دارید

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا