طراحی یک قالب ریسپانسیو دو ستونه (واکنش گرا) آریا تمپ – طراحی سایت,قالب وبلاگ,پوسته وردپرس,قالب وردپرس

طراحی یک قالب ریسپانسیو دو ستونه (واکنش گرا)

طراحی یک قالب نمایشی مناسب برای موبایل به صورت دو ستونه

طراحی قالب ریسپانسیو / واکنش گرا

ابتدا کد html آن :

<div id=”container”>
<div id=”content”>محتوا در اینجا</div>
<div id=”navbar”>لینکهای دسترسی در اینجا</div>
</div>

کد Css آن :

/* for all devices (until the @media block) */
body {
font-family: Arial, Helvetica, sans-serif ;
}
@media only screen and (min-width: 630px) {
/* only for screens wider or equal to 630 pixels */
/* code from http://www.thesitewizard.com/css/design-2-column-layout.shtml */
#content {
float: right ;
width: 80% ;
}
#navbar {
float: right;
width: 20%;
}
}

واگر بخواهیم لینکهای ما در سمت دیگری باشند داریم :

 

کد های html :

<div id=”container”>
<div id=”navbar”>Navigation</div>
<div id=”content”>Content here</div>
</div>

 

کدهای Css :

@media all and (min-width: 630px) {
/* two column code */
#container {
display: flex ;
align-items: stretch ;
flex-flow: row wrap ;
}
#navbar {
order: 1 ;
width: 20%;
}
#content {
order: 2 ;
width: 80% ;
}
}
@media all and (max-width: 629px) {
/* one column code */
#container {
display: flex ;
align-items: stretch ;
flex-flow: column wrap ;
}
#navbar {
order: 2 ;
width: 100%;
}
#content {
order: 1 ;
width: 100% ;
}
}

همان طور که میبینید برای چیدمان ستونها از display: flex ; استفاده شده است که به امکان استفاده از  order: 1 ; را میدهد ولی میتوان به صورت معمول از display: block استفاده شود.

با کمک عبارت flex-flow: در سی اس اس می توانیم عمودی یا افقی بودن نمایش و چیدمان را با دو کد کنترلی (row یا column ) تعیین کنیم.

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

 

دانلود چند نمونه و دمو پیش فرض طراحی ریسپانسیو

دانلود فایل

 

 


برچسبها: , , ,

درج ديدگاه...


یک + = شش

website stats