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

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



  آیا می دانید تا کنون 6339 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

آموزش CSS (فصل سیزدهم - جلسه دوم) : خصوصیت Media

19257 ۱۶ خرداد ۹۲

طراحی برای دستگاه موبایل


مرورگرهای مخصوص mobile و device های با صفحه نمایش کوچک به دلیل محدودیت در اندازه ی صفحه نمایش چالشی را در طراحی style ایجاد می کنند که همین امر باعث می شود تا style متفاوتی را برای آنها تعریف کنیم. همانند تعریف دو style متفاوت برای print و screen. در موبایل و device های با صفحه نمایش کوچک می توان از mediaی handheld استفاده کرد اما در عمل تعداد کمی از موبایل ها از این media پشتیبانی می کنند. راه دوم و بهتر این است که style را برای screen و به همراه max-width و min-width استفاده کنیم.
مثال :

max-width حداکثر اندازه ی صفحه نمایش را مشخص می کند که در موبایل های پیشرفته امروزی معمولا 480pixel می باشد.

تعیین شرط در media


همانطور که در قسمت بالا گفتیم، بهترین روش طراحی برای دیگر دستگاه ها استفاده از max و min-width می باشد، طریقه ایجاد شرط برای تعیین این دو خصوصیت استفاده از and و سپس آوردن شرط در داخل پرانتز است
مثال :

همانطور که می دانید، بعضی از دستگاه های موبایل حالت افقی نیز دارند، در این حالت عرض دوباره تغییر خواهد کرد، پس بهتر است style این حالت را نیز تعیین کنیم.
مثال :

کد اول حالت عمودی یا همان حالت عادی موبایل را مورد هدف قرار می دهد، و کد دوم حالت افقی موبایل را تعیین می کند.

نکته : همیشه قبل از عبارت screen کلمه only قرار دهید، (جهت کار کردن کد در مرورگرهای قدیمی)
مثال :

بسیار خب آموزش این جلسه نیز به پایان رسید و با طریقه طراحی style برای سایر deviceها نیز آشنا شدید در جلسه بعدی.........! در سری آموزشی بعدی با طریقه طراحی قالب آشنا خواهیم شد.
حال که این سری به پایان رسید لازم دونستم چند نکته رو یادآوری کنم :
1. همه آموزش هایی که قرار دادم، آموخته های شخصی خودم بوده، و از جایی کپی پیست نشده /پاسخ بعضی از دوستان قدرشناس! که پیغام خصوصی داده بودند، "چرا دیر آپ میشه آموزش سی اس اس. یه کپی پیست کردن از مطالب بقیه که این همه وقت نمیخواد."
2. دلیل دیر آپ شدن این سری بعضی مشکلات خصوصی، و مشغله های کاری بوده اگه کسی از دوستان ناراحت شده از این موضوع، ازش عذرخواهی می کنم.
3. یادگیری این آموزش ها نیاز به سعی و تلاش و تمرین مستمر داره، پس همیشه یک زمانی رو اختصاص بدین به تمرین این آموخته ها.
4. سری آموزشی طراحی قالب نیز، ایشالا به زودی شروع میشه.
امیدوارم که از این سری آموزشی نهایت بهره رو برده باشین. اگر سوالی داشتین میتونید در بخش نظرات مطرح کنید.

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

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

  • ‏‏
    kiansoft2000(۲۲ مرداد ۱۳۹۲)

    عالی بود

  • ‏‏

    سجاد جان واقعا خسته نباشید
    از همه بچه های این سایت تشکر میکنم واسه خاطر زحمت هایی که میکشید

    • ‏‏
      لقمان آوند(۹ شهریور ۱۳۹۲)

      ممنون ، بندهه هم از شما و کاربران عزیزی که پیگیر مطالب سایت هستید تشکر می کنم .

  • ‏‏

    صفحه هر چند ثانیه یه بار می پره بالا یا پایین. آدم دیونه می شه برا خوندن مطلب

    • ‏‏
      لقمان آوند(۲۷ دی ۱۳۹۲)

      چنین مشکلی وجود نداره دوست عزیز . مطمئنید ؟

  • ‏‏
    1234567890(۶ اسفند ۱۳۹۲)

    با سلام

    3 ردیف با 4 عکس دارم ، وقتی که صفحه نمایش browser را کوچیک میکنم در هر ردیف 2 عکس قرار میگیرد . میخواستم بدونم اینو با media درست میکنن ؟ اگه آره ، چطوری میتونم تشخیص بدم که به width , height چه مقداری میتونم بدم ؟

    با تشکر از آموزش ها و ایتکه وقتی برای پاسخگویی به ما قرار میدهید .

  • ‏‏
    سید رضا(۲۲ اسفند ۱۳۹۲)

    سلام. خسته نباشید.
    لقمان جان ممکنه آموزش طراحی responsive design رو هم قرار بدین؟
    ضمنا یه ایمیل از خودت بیزحمت بده چند تا سوال کوتاه ازت دارم میخوام تو میل ازت بپرسم.

    • ‏‏
      لقمان آوند(۲۲ اسفند ۱۳۹۲)

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

  • ‏‏
    اکبر قره باغی(۱۲ اردیبهشت ۱۳۹۳)

    بسیار ممنون

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram