تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
نمایش نتایج: از 1 به 7 از 7

مقاله: قالب ریسپانسیو چیست و چگونه قالب را ریسپانسیو کنیم؟

    1. قالب ریسپانسیو چیست و چگونه قالب را ریسپانسیو کنیم؟ »

      قالب ریسپانسیو چیست و چگونه قالب را ریسپانسیو کنیم؟

      نگارش: , by (مدیریت کل سایت)
      2013/11/27 06:59 PM
      امتیاز:  (1 رای ، میانگین : 5.00 )

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

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

      لی آوت ریسپانسیو

      در طرح ریسپانسیو برای هر محدوده پیکسلی یک سری قوانین با CSS روی صفحه اجرا می شود که هدف از آن بهتر نمایش دادن سایت در آن عرض می باشد. به صورتی که صفحه بهم نمی ریزد. در صفحه های موبایل و همچنین تبلت ها طرح نیاز به زوم کردن ندارد.

      چرا باید طرح را ریسپانسیو کنیم؟

      با توجه به پیشرفت روز افزون تکنولوژی که هر روزه شاهد معرفی گجت های جدیدی در بازار هستیم و افزایش میزان استفاده کاربران از موبایل ها و تبلت ها مخصوصا در ایران، اگر احتمال می دهید که کاربران شما سایت یا انجمن شما را با موبایل و تبلتشان باز کنند باید طرح خود را ریسپانسیو کنید.

      در طرح ریسپانسیو جا برای مانوور زیاد است. در آن بدون تغییر استایل صفحه و ریفرش آن صفحه می تواند تغییر کند.

      چگونه باید صفحه را ریسپانسیو یا واکنش گرا کنیم؟

      ابتدا طرح را به صورت معمول مثل همیشه کدنویسی کنید و البته واکنش گرا بودن آن را مد نظر داشته باشید. مثلا مد نظر داشته باشید که نوبار شما قرار است در صفحات خیلی کوچک مثل صفحات موبایل به یک آیکن تغییر کند که با کلیک بر روی آن منو نوبار ظاهر می شود.

      سپس کد زیر را باید در head قالب خود (در ویبولتین headinclude) قرار دهید که به دستگاه می فهماند قالب باید هم عرض دستگاه لود شود (نیازی به زوم نداشته باشد و مدیا کوئری ها هم اجرا شود).

      کد:
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
      سپس برای تغییرات باید از سی اس اس مدیا کوئری استفاده کنید.

      مدیا کوئری ها باید در فایل سی اس اس شما قرار داده شود (می توانید یک سی اس اس جدا هم به نام آن ایجاد کنید و در سی اس اس اصلی include کنید). در ویبولتین کد ها می تواند در additional.css قرار گیرد.

      نکته: لی آوت دیفالت ویبولتین ۵ ریسپانسیو است.

      با استفاده از media query میتوانید تعریف کنید مثلا از عرض ۶۰۰ پیکسل به پایین کلس ایکس مقادیرش عوض شود و کلس وای تغییر کند.

      نمونه از کد مدیا کوئری به صورت زیر است:

      کد:
      @media only screen and (max-width: 600px) {
      .class { color:red; }
      }
      که در این مثال از max-width استفاده شده ولی می توانید از max-height, min-height, min-width و غیره استفاده کنید.

      ریسپانسیو کردن سخت نیست ولی نیاز به کار و وقت زیاد دارد.

      برای اینکه تغییرات و اندازه دیوایس ها را بدانید می توانید اپ Dimensions را برای گوگل کروم دانلود کنید. در این اپ اندازه عمومی دیوایس ها وجود دارد و میتوانید سایت خود را در آن وارد کرده و در عرض های مختلف ببینید.

      Chrome Web Store - Dimensions

      حتی با مینیمایز کردن صفحه مرورگر هم می توانید تغییرات را برای تست مشاهده کنید.

      به غیر از max-width می توانید برای ریسپانسیو کردن از Pixel Ratio نیز استفاده کنید.

      در مورد Pixel Ratio در مقاله بعدی به صورت کامل صحبت خواهم کرد.

      اگر سوالی داشتید در خدمتم.

      موفق باشید.
  1. Top | #2
    کاربر سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    3,348
    میزان امتیاز
    394

    پیش فرض

    علی آقا زده تو کار مقالات جدید !

    مقالات جدید واقعا عالی هستند !

    2 تشکر توسط:


  2. Top | #3
    مدیر ارشد

    ورژن ویبولتین
    All Versions
    نوشته ها
    3,176
    میزان امتیاز
    447

    پیش فرض

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

    مثلا مد نظر داشته باشید که نوبار شما قرار است در صفحات خیلی کوچک مثل صفحات موبایل به یک آیکن تغییر کند که با کلیک بر روی آن منو نوبار ظاهر می شود.

  3. Top | #4
    کاربر اخراجی

    ورژن ویبولتین
    4.2.0
    نوشته ها
    432
    میزان امتیاز
    0

    پیش فرض

    اقا میشه کمکم کنید
    ببینید دقیقا مثل اموزشتون رفتم جلو و توی تبلت ما دقیق کار میکرد و اندازه اش درست بود و تبلت 7 اینچی هست
    اما با گوشیم که رفتم مدلش گلکسی اس 3 هست رفتم بنر داخل هدر رفت توی لوگو و دیگه صفحه بزرگ و کوچک نشد
    میشه کمک کنید یجوری کنم که واسه همه اندازه ها ست باشه چچون این فقط واسه تبلت من خوب بود

    کاربر مقابل از r.amir2332 بابت این پست مفید تشکر کرده است:


  4. Top | #5
    مدیر ارشد

    ورژن ویبولتین
    All Versions
    نوشته ها
    3,176
    میزان امتیاز
    447

    پیش فرض

    نقل قول نوشته اصلی توسط r.amir2332 نمایش پست ها
    اقا میشه کمکم کنید
    ببینید دقیقا مثل اموزشتون رفتم جلو و توی تبلت ما دقیق کار میکرد و اندازه اش درست بود و تبلت 7 اینچی هست
    اما با گوشیم که رفتم مدلش گلکسی اس 3 هست رفتم بنر داخل هدر رفت توی لوگو و دیگه صفحه بزرگ و کوچک نشد
    میشه کمک کنید یجوری کنم که واسه همه اندازه ها ست باشه چچون این فقط واسه تبلت من خوب بود
    برای هر دیوایس باید مجدد انجام بشه!

    3 تشکر توسط:


  5. Top | #6
    کاربر اخراجی

    ورژن ویبولتین
    4.2.0
    نوشته ها
    432
    میزان امتیاز
    0

    پیش فرض

    بابت راهنمایی ممنون اما من نمی تونم ایا شما میتونید انجام بدید ممنون میشم

    2 تشکر توسط:


  6. Top | #7
    کاربر سایت

    ورژن ویبولتین
    2.1
    نوشته ها
    5
    میزان امتیاز
    0

    پیش فرض

    بسیار زیبا توضیح دادید
    سپاسگذارم
    میرزاییان

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کسانی که این مقاله را دیده اند از این مقاله ها نیز بازدید کرده اند

  1. دانلود استایل ویبولتین VBIran Bright ( ریسپانسیو )
    توسط Designer در انجمن استایل 4.2.x
    پاسخ: 176
    آخرين نوشته: 2016/06/10, 05:05 PM
  2. کش سیو شده در هر بار وارد شدن به انجمن
    توسط iAlem در انجمن پرسش و پاسخ
    پاسخ: 15
    آخرين نوشته: 2015/04/13, 04:45 PM
  3. طراحی ریسپانسیو چیست؟ (Responsive)
    توسط Mr.Ramin در انجمن آموزش های وی بولتین
    پاسخ: 5
    آخرين نوشته: 2013/08/08, 02:07 AM
  4. کار اصلی وبسیو
    توسط mohamad360 در انجمن پرسش و پاسخ
    پاسخ: 1
    آخرين نوشته: 2013/06/29, 09:43 PM

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •