بخش مقالات آکادمی | Articles
آخرین آموزش ها

“محتوا همانند آب است”

همانطور که آب در هر ظرفی حالت همان ظرف را به خود میگیره محتواهای سایت هم باید در قالب به همین شکل باید باشه.چرا؟ چون با گسترش گجت های هوشمندی چون گوشی های هوشمند ، تبلتها و تلویزیون های هوشمند کاربران متصل به اینترنت وارد سایت ها میشن. قبلا جدا از قالبی که برای کامپیوترهاکه به دستکتاپ معروفن پیاده میشد. قالبی جداگانه به نام موبایل ورژن طراحی میشد و سرور با توجه به شناسه مرورگر کاربر تشخیص میداد که کاربر با موبایل سایت رو بازدید میکنه و صفحه موبایل ورژن رو لود کنه. اگر برای گجت ها هیچ طرح و برنامه ایی نداشته باشیم شاهد بهم ریختگی و ناموزونی در قالب هستیم پس درنتیجه سایت نمای خودشو ازدست میده و درآخر بازدیدکننده های سایت رو از اومدن به سایتتون منصرف میکنه. این درصورتی هستش که اغلب کاربران با گجتاشون مثه tablet یا ipad وب گردی میکنن.
طراحی واکنش گرا این مشکل رو حل کرده و ساختار لایه های سایت به طور شناور می باشد. در شبکه های انعطاف پذیر برای اندازه عناصر صفحه به جای واحدهای مطلق مانند پیکسل و پوینت از واحدهای نسبی مانند درصد استفاده میشه. تا بیرون از قالب نمایش دهنده خودشون نشون داده نشه. قالب های واکنشگرا توسط مدیا کوئری های css امکان پیاده سازی رو به ما میدن. بصورت گسترده میتونین با مراجعه به سایت www.smashingmagazine.com با مفاهیم طراحی واکنشگرا و نحوه عمومیه پیاده سازی اون آشنا بشین.

طراحی واکنش گرا  طراحی واکنش گرا responsive web design layouts12

پیاده سازی قالب واکنش گرا:

ابتدا در قسمت Head قالبتون این تگ و وارد کنین

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

سپس تنها کاری که باید بکنین تو کلاسای CSS تون یا اگه اونارو تو Style کد پیاده سازی کردین با درصد تعریف کنین. مثلا

<style>
} city.
;float: left
;margin: 5%
;padding: 15%
;width: 300%
;height: 300%
;border: 1% solid black
{
</style>

اگرم قالبتون بوت استرپ هستش باید در سایزای مختلف که واسه سایت طراحی میکنین اونارو هم پیاده سازی کنین.
مثال

@media (min-width:768px)
}
} city.
;float: left
;margin: 5%
;padding: 15%
;width: 300%
;height: 300%
;border: 1% solid black
}
{

شما میتونین با کوچیک وبزرگ کردن مرورگر تغییرات قالب سایت واکنشگرارو ببینین.

امیدوارم مطالب این مقاله هم براتون مفید بوده باشه.

****

تاریخ ارسال
7 اردیبهشت 1395
ارسال شده توسط
محمدرضا تناکیان
میزان بازدید
0 نفر بازدیدکننده
0 دیدگاه
فایلی جهت دانلود وجود ندارد !
مشخصات
حجم و فرمت :

دیدن این مطالب نیز توصیه می شود

0 دیدگاه ثبت شده

شما هم نظری بدهید
هنوز دیدگاهی ثبت نشده
توجه فرمایید:
نظرات شما پس از بررسی و تایید نمایش داده می شود.
لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنید.