You are here:

وب واکنشی پاسخی به نیاز امروز

فرستادن به ایمیل چاپ

Tags: تجربیات | تخصصی | معرفی | وب

یکی از مباحث جدید حوزه طراحی وب، وب واکنشی (Responsive Web Design) است به گونه ای که یکی از شش گرایش برتر طراحی وب درسال 2013 نیز معرفی شده است. نوعی از طراحی که عناصر صفحه ، بسته به کوچک و بزرگی اندازه مونیتور، به طور خودکار تغییر می کنند تا بهترین چینش را همیشه داشته باشند. فرض کنید سایتی طراحی کرده اید با سه ستون در قسمت فوقانی مطالب. به کمک طراحی واکنشی ، در مرورگرهای موبایل که صفحه کوچکی دارند این ستون ها زیر هم نمایش داده می شود،در تبلت ها و مانیتورهای کوچکتر با دو ستون که اولی و دومی زیر هم نمایش داده شوند و در مانیتورهای بزرگ در حالت معمولی نمایش داده شود.

نکته اصلی در طراحی اینگونه از سایتها، دستور @Media است که هنگام تعریف شیوه نامه برای یک صفحه (CSS) به شما اجازه می دهد بسته به اندازه صفحه ، خصوصیات متفاوتی را برای عناصر در نظر بگیرید.

مثلا دستور زیر عنصر container را زمانی برابر 1100 پیکسل قرار میدهد که صفحه ، مانیتور معمولی بوده و حداقل عرض صفحه 1200پیکسل باشد.

@media screen and (min-width:1200px){
#container{
width:1100px;
}

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

یک چهارچوب واکنشی ساده و مناسب که امکان ایجاد صفحات وب واکنشی را سریع و راحت در اختیار شما می گذارد ، چهارچوب Kube است اما اگر قصد طراحی حرفه ای یک سایت با یک چهارچوب واکنشی را دارید ، Bootstrap را پیشنهاد می کنم که توسط سایت توئیتر استفاده شده است و در نسخه جدید جوملا یعنی جوملا 3 نیز  به کار رفته است .

 

 

نظرات (2)Add Comment
0
zurb
نویسنده عرفان, نوامبر 06, 2012
سلام.
ممنون از مطلب جالب شما. فکر کردم بد نباشه zurb foundation رو هم معرفی کنم. فکر میکنم حتی از twitter bootstrap هم قوی تر باشه.
http://foundation.zurb.com
0
ذکر مثال...
نویسنده حسین, نوامبر 08, 2012
پوسته وبگاه ما این قابلیت رو داره. یعنی برای 5 عرض متفاوت سازگار شده smilies/cool.gif

نظرتان را بنویسید
کوچکتر | بزرگتر

busy
آخرین بروزرسانی ( يكشنبه ، 14 آبان 1391 ، 17:10 )