جلسه سوم : اصول یک طرح واکنش گرا (بخش دوم)
جلسه سوم : اصول یک طرح واکنش گرا (بخش دوم)
نویسنده : ایمان یزدانی

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

2. دوم تغییر لینک استایل کلی بوسیله پردازش های جاوا اسکریپت

امروزه با متدهای جدیدی که در عرصه کتابخوانه ها و برنامه نویسیها وجود دارد هر طراحی دیگر در محدودیت خاصی نیست و میتواند تمامی افکار و مخیلات خود را پیاده سازی و به جلوه های بینایی تبدیل نماید برای همین ما در این بررسی سعی میکنیم از کتابخوانه جی کوئری بهره بگیریم!

به کد زیر دقت کنید :
$('link[href="style1.css"]').attr('href','style2.css'); 
بله،با همین کد میتوانید در رزولوشن های مختلف وبسایتی متفاوت داشته باشید و نشان میدهد که این راه هم موثر است اما ممکن است در برخی حالات باگ هایی هم ایجاد نماید و به درستی نشان داده نشود.

به مثال زیر دقت نمایید :
function adjustStyle(width) {
 
   width parseInt(width);
 
   if (width 701) {
 
       $("#size-stylesheet").attr("href""css/narrow.css");
 
   } else if ((width >= 701) && (width 900)) {
 
       $("#size-stylesheet").attr("href""css/medium.css");
 
   } else {
 
      $("#size-stylesheet").attr("href""css/wide.css"); 
 
   }
}

$(function() {
 
   adjustStyle($(this).width());
 
   $(window).resize(function() {
 
       adjustStyle($(this).width());
 
   });
}); 
مشاهده میکنید که توانستیم به آسانی یک کد ساده بنویسیم که در آن بتوانیم از استایل ها گردشی برای هر رزولوشن داشته باشیم، پس تنها با چند فایل استایل که در/برای رزولوشنهای مختلف تهیه شده میتوانید یک وبسایت واکنشگرا داشته باشید...

3. استفاده از طراحی درصدی

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

به همین ترتیب باید تمام محاسبات برای Margin,Font Size,Padding که مهم ترین هستند و دیگر خاصیت ها را انجام دهید که آنقدر سخت هم نیست که نتوان اجرا کرد اما مشقت زیادی را خواهان است که تجربه شما در طراحی میتواند بهترین کمک کننده باشد.

4. بهره گیری از فریم ورکهای جی کوئری

همانند تمامی فریم ورکهای موجود برای CSS و تحت آن ، برای کتابخوانه محبوب جی کوئری هم این فریم ورک ها جهت واکنشگرا سازی موجود است که میتوانیم دو نمونه از این فریم ورک ها را نشان دهیم :
jRespond
responsejs

و ...
دوستان عزیز،این بخش پایان دسته بندی انواع تکنیک ها نیست و همانطور که میدانید خلاقیت و نوآوری غیرقابل توقف است و میتوانید با کمی مطالعه و جستجو به یکسری تکنیک های جدیدتر و بهینه تر دستیابی پیدا کنید و این مسئله هم فراموش نکنید که یک طرح واکنشگرا در بعضی مواقع سابقه طراحی بالایی هم میخواهد!

منبع : http://forum.iclassic.ir/showthread.php?tid=171
نویسنده :

X
پوسته Royalfun
پوسته زیبای RoyalFun قابلیت های پوسته : تغییر رنگ _ چهار رنگ [بدون رفرش قالب] هدر زیبا باکس و ...
پوسته
دیدگاه های کاربران 0

برای عضویت در کانال تلگرامی
[همیار مای بی بی]
کلیک کنید
دریافت آخرین اخبار ، کدهای تخفیف و جوایز
برای اطلاع از آخرین اخبار مای بی بی فارسی عضو کانال تلگرامی شوید :