تغییر اندزاه متن و فیلم در طراحی واکنش گرا Responsive
- نویسنده : webelizer در دسته بندی JQuery, طراحی سایت
- بدون نظر و 310 بازدید
- ۹۱/۱۱/۱۸
- پلاگین jquery , پلاگین جی کوئری jquery , تغییر اندزاه متن و فیلم در طراحی واکنش گرا Responsive , طراحی responsive سایت , طراحی واکنش گرا سایت
طراحی واکنش گرا یا همان responsive چیست و مزیت ان نسبت به شیوه های دیگر طراحی در چیست ؟
اکثر طراحان وب سایت طرح هایشان را متناسب با اندزاه معمول صفحه نمایش های کامپیوتر ایجاد می کنند که معمولا عرض این نوع طرح ها بین 900 px تا 1000 px می باشد این اندازه برای نمایش در کامپیوتر هایی که اندازه مانیتور بالاتر از 15 اینچ داشته باشند مناسب می باشد و مشگلی ایجاد نمی کند ، اما آیا تمام بازدید های یک وب سایت توسط کامپیتور و لپ تاپ صورت می گیرد ؟ مسلما جواب خیر است ، با گسترش استفاده مردم از موبایل های هوشمند که معمولا صفحه نمایش هایی بزرگتر از 3 اینچ دارند و همچنین همه گیر شدن تب استفاده از تبلت به جای لپ تاپ با وجود داشتن صفحه نمایش هایی که معمولا از 4 اینچ شروع شده و به 10 اینچ نیز می رسد باعث شده تا استفاده از موبایل و تبلت برای وبگردی و جستجو در اینترنت تا حد قابل توجهی افزایش یابد به ظوریکه طبق آماری که از سوی فیسبوک اعلام شد بیش از 50 درصد کاربران از موبایل و تبلت برای مشاهده پروفایل شان استفاده می کنند . سوالی که اینجا مطرح می شود این است که آیا کاربرانی که از موبایل و تبلت برای مشاهده سایت شما استفاده می کنند دقیقا سایت را همینگونه می بینند ؟ جواب این سوال نیز خیر است به دلیل اینکه صفحه نمایش های این دستگاه ها کوچک تر و دارای رزولوشن پایین تری از رزولوشن مورد استفاده در طراحی سایت شماست ، اما چاره رفع این مشگل چیست ؟ در گذشته طراحان برای هر دستگاهی نسخه ای از سایت را طراحی می کردند یعنی برای موبایل یک نسخه ، برای تبلت نسخه ای دیگر و برای کامپیوتر نسخه ای دیگر این نوع عملکرد باعث رفع مشگل نمایش سایت در دستگاه های متفاوت می شود اما اگر دیتگاه جدیدی به بازار می آمد طراح مجبور بود نسخه ای دیگر از سایت را برای ان دستگاه خاص طراحی کند . با گذشت زمان و بوجود امدن ابزارها و شیوه های جدید طراحی وب تکنیکی به نام responsive یا واکنش گرایی در طراحی سایت بوجود امد به این صورت که دیگر نیازی به طراحی چندین نسخه از سایت برای دستگاه های متفاوت نیست و با آمدن دستگاه جدید ، سایت به شیوه ای درست و صحیح برای کاربران آن دستگاه به نمایش درخواهد آمد . انچه خواندید مقدمه ای برای طراحی واکنش گرا بود .
تغییر اندزاه متن و فیلم در طراحی واکنش گرا Responsive با استفاده از پلاگین های جی کوئری
حال فرض می کنیم شما سایت تان را متناسب با اصول واکنش گرایی طراحی کرده اید مشگلی که در اینجا بوجود می آید تغییر اندزاه ویدیو و متن متناسب با اندزاه اندزاه صفحه نمایش است برای رفع این مشگل پلاگین قدرتمند fit vids پیشنهاد می شود نحوه کار با پلاگین راحت می باشد و تنها باید div ای که ویدیو در آن قرار می گیرد را فراخوانی کنید و بقیه کارها را به پلاگین بسپارید ! ابتدا کتابخانه جی کوئری و کتابخانه پلاگین را فراخوانی کرده و به جای id استفاده شده در اینجا ( #thing-with-video ) کلاس و یا ای دی مورد نظر خود را قرار دهید .
<pre><script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#thing-with-videos").fitVids();
});
</script></pre>
برای هماهنگ شدن متن ها با صفحه نمایش های متفاوت دو راه حل وجود دارد یکی اینکه در هنگام طراحی واکنش گرا برای اندزاه های تفاوت مانیتور ، اندزاه های مفتاوتی به متن ها بدهیم مثلا برای صفحه نمایش هایی با رزولوشن بالای 960 px اندزاه متن ها 14 پیکسل باشد برای رزولوشن بین 760 تا 960 پیکس اندزاه فونت ها 12 پیکسل و … که اینکار باعث تغییر ناگهانی اندزاه متن ها می شود اما با استفاده از پلاگین قدرتمند fit text اندزاه متن ها به صورت خطی و یکنواخت کاهش پیدا می کنند و جلوه زیبایی به سایت می دهد برای استفاده از این پلاگین jquery ، پس از فراخوانی کتابخانه جی کوئری و پلاگین تنها با قرار دادن کلاس و یا ای دی مورد نظر به جای ای دی #responsive_headline می توانید شاهد تغییرات یکنواختی در اندزاه متن هایتان باشید .برای قرار دادن چنیدن کلاس و ای دی می توانید از جداکننده , استفاده کنید .
<pre><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script></pre>
پلاگین ها را می توانید از لینک زیر دانلود کنید .