#Layout responsive
Learn how to build a responsive web page architecture for all devices
دعنا نشاهد معا الملف style.css ماذا سيكون بداخله ونشرحه بالتفصيل ومن ثم نعود لملف index.html
html,body{
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
color: #ebebeb;
}
.FlexWrapper{
background-color: indigo;
display: flex;
flex-direction: column;
}
.FlexItems{
display: flex;
align-items: center;
min-height: 6.5rem;
padding: 1rem;
}
.FlexHeader{
background-color: #105b63;
order: 1;
}
.FlexContent{
background-color: #FFFAD5;
order: 2;
}
.FlexSideOne{
background-color: #ffd34e;
order: 3;
}
.FlexSideTwo{
background-color: #db9e36;
order: 4;
}
.FlexFooter{
background-color: #bd4932;
order: 5;
}
@media (min-width: 30rem){
.FlexWrapper{
flex-flow:row wrap;
}
.FlexHeader{
width: 100%;
}
.FlexContent{
flex:1;
order:3;
}
.FlexSideOne{
width: 150px;
order: 2;
}
.FlexSideTwo{
width: 150px;
order:4;
}
.FlexFooter{
width:100%;
}
}
رائع! لاحظ الان بدأ الموضوع يتوضح بشكل اكثر والان بدأنا نقوم بإعطاء التنسيقات للكل والبداية كانت مع الhtml,body وتاخذ التالي margin: 0; padding: 0; font-family: 'Oswald', sans-serif; color: #ebebeb; وموضح اعلاه التفصيل ولكن اول مثال يمكن من خلاله فهم الموضوع كيف ماشي بالضبط تمام! اما هذه التي تحمل @media (min-width: 30rem) تخص التنسيق وبالضبط كما هو الحال مع تنسيق الموبايل .وفي هذا الفيديو شرح مفصل .
تعليقات
إرسال تعليق