القائمة الرئيسية

الصفحات

 #Layout responsive

Learn how to build a responsive web page architecture for all devices

دعنا نشاهد معا الملف style.css ماذا سيكون بداخله ونشرحه بالتفصيل ومن ثم نعود لملف index.html 
html,body{
    margin0;
    padding0;
    font-family'Oswald'sans-serif;
    color#ebebeb;
}
.FlexWrapper{
    background-colorindigo;
    displayflex;
    flex-directioncolumn;
}
.FlexItems{
    displayflex;
    align-itemscenter;
    min-height6.5rem;
    padding1rem;
}
.FlexHeader{
    background-color#105b63;
    order1;
}
.FlexContent{
    background-color#FFFAD5;
    order2;
}
.FlexSideOne{
    background-color#ffd34e;
    order3;
}
.FlexSideTwo{
    background-color#db9e36;
    order4;
}
.FlexFooter{
    background-color#bd4932;
    order5;
}
@media (min-width30rem){
    .FlexWrapper{
        flex-flow:row wrap;
    }
    .FlexHeader{
        width100%;
    }
    .FlexContent{
        flex:1;
        order:3;
    }
    .FlexSideOne{
        width150px;
        order2;
    }
    .FlexSideTwo{
        width150px;
        order:4;
    }
    .FlexFooter{
        width:100%;
    }
}

رائع! لاحظ الان بدأ الموضوع يتوضح بشكل اكثر والان بدأنا نقوم بإعطاء التنسيقات للكل والبداية كانت مع الhtml,body وتاخذ التالي margin: 0; padding: 0; font-family: 'Oswald', sans-serif; color: #ebebeb; وموضح اعلاه التفصيل ولكن اول مثال يمكن من خلاله فهم الموضوع كيف ماشي بالضبط تمام! اما هذه التي تحمل @media (min-width: 30rem) تخص التنسيق وبالضبط كما هو الحال مع تنسيق الموبايل .وفي هذا الفيديو شرح مفصل . 


هل اعجبك الموضوع :

تعليقات