• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

واکنشگرا کردن تصاویر (جلسه 12) : استفاده از CSS - قسمت دوم

4 294 ۱۹ فروردین ۹۵

در این مطلب با ادامه آموزش واکنشگرا کردن تصاویر در خدمتتون هستم.Responsive-Design

Art Direction

چه روشی در CSS هست که میتونیم با استفاده از اون موارد Art Direction رو حل کنیم؟ پاسخ Media Query هست.

خیلی ساده هست و ما با فرض اینکه با اون آشنایی دارید در موردش مثالی رو قرار نمیدیم. برای اینکه بهتر با قضیه Media Query آشنا بشید و Media Query ها با هم اشتراک نداشته باشن و باعث نشه که یک تصویر دو بار دانلود بشه میتونین این لینک رو ببینید و مطالعه کنید.

Media Query های مربوط به Resolution

اگر شما قصد دارید که نمایش دهنده های با رزولوشن بالا در موارد Art Direction تصاویر شما رو بخوبی نمایش بدهند، شما به احتمال زیاد قصد خواهید داشت که از Media Query مربوط به رزولوشن استفاده کنید.resolution-mq

این نوع مدیاکوئری ها به شما اجازه میدن که کدهای CSS خاصی رو به دستگاه های با رزولوشن مشخصی که شما میخاید اعمال بکنید.

اولین چیزی که شاید نظرتون رو به خودش جلب کنه اینه که در Media-query از prefix مربوط به webkit استفاده کردیم. این مورد برای اون دسته از دستگاه های قدیمی هست که از syntax مختص به خودشون پشتیبانی میکنن. بعد از اون یک Media Query مربوط به resolution رو قرار دادیم که در اون min-resolution رو به عنوان شرط قرار دادیم و همونطور که شما هم حدس میزنید میتونین از max-resolution هم استفاده کنید.

Resolution Media Query میتونه یکی از سه موارد زیر رو چک و کنترل بکنه:

  • dpi : تعداد نقاط در هر اینچ
  • dpcm : تعداد نقاط در هر سانتیمتر
  • dppx : تعداد نقاط در واحد پیکسل

دو مورد اول خیلی سر راست و شسته رفته هستند و میتونین از اونا استفاده کنید. اما مورد سوم شاید گیج کننده باشه براتون. Mozilla Developer این مورد رو بصورت زیر تعریف کرده است:

این واحد تعداد نقاط در واحد پیکسل رو بیان میکند. بعلت نسبت ثابت 1:96 در CSS، یک dppx برابر با 96dpi هست و همون رزولوشون پیش فرضی هست که نمایش داده میشه.

چیزی رو که من از این جمله برداشت کردم ایده مربوط به 1x و 2X و ... هست. این موضوع بر پایه عدم دقت هست. مقدار 1x در بعضی از دستگاه ها در مقایسه با دستگاه های دیگه فرق داره بدلیل اینکه بعضی از دستگاه ها 72dpi و بعضی از اونا 96 و ... هستند.

شما میتونین به 1dppx مثل 1x و همچنین به 2dppx مثل 2X نگاه کنید و ...

در جلسات بعدی در مورد Image Breakpoint براتون توضیح میدم.

در جلسات بعدی با ادامه مطالب در خدمتتون هستم.

موفق و سربلند باشید.

یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    من کلی جلسه رو مطالعه کردم کلی گیج شدم !
    مگه روش مدیا کوئری مرسوم چش هست که این همه میپیچونید!؟
    مثل استفاده شده در مثال زیر
    http://grocery.walmart.com/usd-estore/m/home/anonymouslanding.jsp

    • ‏‏
      محمد اسفندیاری(۱۵ اردیبهشت ۱۳۹۵)

      اینا روش های پیچیره تر هستن و با استفاده از اونا میتونین Performance بهتری داشته باشید….با استفاده از اون Media Query همه کار رو نمیشه انجام داد.

      • ‏‏

        اگه میشد کوتاه، یه کوچولو اینجا میگفتید من شاید قانع میشدم :دی
        سوال داشتم، ممنون میشم اگه جواب بدید! درمورد veiwport رو برای دستگاه های با پیکسل های بالا مثل ipad باید چجوری تنظیم کرد!؟ و چه دستگاه هایی رو در بازار شامل میشه تا جایی که من اطلاع دارم الان سامسونگ و سونی هم، با رزولوشن بالا کار میکنن حتی 4 برابر و دقیقا نمیدنم چه دستگاهایی هستن و چه واکنشی دارن وباید درمقابل چیکار کرد!

        • ‏‏
          محمد اسفندیاری(۱۶ اردیبهشت ۱۳۹۵)

          http://dpi.lv/
          http://www.mydevice.io/
          از این سایتا میتونین برای به دست آوردن اطلاعات مورد نظر در مورد دستگاه های مختلف استفاده کنید
          بعدش با استفاده از این قواعد و کدهایی که در این جلسه گفته شد میتونین در مواقع مختلف تصاویر مختلفی رو قرار بدین
          موفق باشید

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram