چهارشنبه , ۱ آذر ۱۳۹۶
جدیدترین آموزش ها
خانه » فیلم آموزش CSS » فیلم آموزش رایگان CSS3 قسمت آخر-۷۰(Responsive & Media Queries)

فیلم آموزش رایگان CSS3 قسمت آخر-۷۰(Responsive & Media Queries)

سلام
در جلسه آخر css3 به یکی از مهم ترین مباحث css3 یعنی Media Querie ها می پردازیم که ارتباط مستقیم با مبحث Responsive دارند.مطالبی را در رابطه با ریسپانسیو بیان می کنیم و سپس یه سراغ media type ها و media feature ها می رویم و تمام حالت های مهم آن را بررسی می کنیم و عملگر های منطقی آن را توضیح می دهیم و درنهایت نکاتی را در رابطه با ابزار موجد در طراحی Responsive در مرورگر کروم می گوییم.
بدين ترتيب اين دوره به پايان رسید و اميدواريم که مطالب ارائه شده در اين دوره مورد توجه کاربران قرار گرفته باشد و  باز هم بتوانيم با دوره هاي آموزشي بهتر و با کيفيت تر در خدمت کاربران عزیز باشيم.

آموزش Media Queries-css3

آموزش css3

Responsive & Media Queries in css

سلام

در جلسه آخر css3 به یکی از مهم ترین مباحث css3 یعنی Media Querie ها می پردازیم که ارتباط مستقیم با مبحث Responsive دارند.مطالبی را در رابطه با ریسپانسیو بیان می کنیم و سپس یه سراغ media type ها و media feature ها می رویم و تمام حالت های مهم آن را بررسی می کنیم و عملگر های منطقی آن را توضیح می دهیم و درنهایت نکاتی را در رابطه با ابزار موجد در طراحی Responsive در مرورگر کروم می گوییم.

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

 

If you’re reaction to this is: you should never base your breakpoints on devices!! You have a good point. Justin Avery has a nice post on the possible pitfalls of using device-specific breakpoints. Choosing breakpoints based on your design and not specific devices is a smart way to go. But sometimes you just need a little help getting one particular situation under control.
A major component of responsive design is creating the right experience for the right device. With a gazillion different devices on the market, this can be a tall task. We’ve rounded up media queries that can be used to target designs for many standard and popular devices that is certainly worth a read.
If the screen size is mobile device then I want the text to wrap 100% across the screen (for either landscape or non-landscape) with a max width of 350px (in case of something like landscape mode iPad).
I’m just at the base of my learning curve on using alternate stylesheets for different devices. Following your example elsewhere I’ve sort of got it working. I’m testing it on my HTC Desire Android and for it to work on this phone I’m having to set as follows:
We’ve covered using CSS media queries to assign different stylesheets depending on browser window size. In that example, we changed the layout of the entire page based on the space available. It isn’t required that we make such drastic changes with this technique though, so in this tutorial we’ll go over a design tweak with a smaller scope. We’ll also cover the syntax for using media queries within a single stylesheet and more examples of that.
You may use as many media queries as you would like in a CSS file. Note that you may use the and operator to require multiple queries to be true, but you have to use the comma (,) as the or operator to separate groups of multiple queries. The not keyword can be used to alter the logic as well

 

   دانلود

درباره ی مدیر-محسن پور

من مهیار محسن پور هستم. علاقه شدیدی به طراحی وب مخصوصا به کد نویسی سمت سرور دارم . به زبان های html,css,javascript,jquery,php تسلط دارم. 6 ساله برنامه نویسی می کنم و شروع برنامه نویسیم هم با اسمبلی بوده. به برنامه سازی سیستم علاقه خاصی دارم چون حس میکنم درک بالایی از کامپیوتر به انسان میده. با زبان #C اشنایی دارم و برای یک پروژه دانشگاهی با این زبان قدرتمند بازی طراحی کردم. برای گوشی های دارای سیستم عامل اندروید برنامه طراحی کردم و تا حدودی با برنامه نویسی اندروید هم اشنا هستم. تو حوزه IT و امنیت مدت کوتاهی فعالیت کردم و به نسبت با شبکه اشنا هستم.

54 دیدگاه

  1. د
    دیگران - رتبه بر اساس تعداد نظرات : خواننده

    خدا قوت ، خسته نباشید . .

  2. s
    sajjad - رتبه بر اساس تعداد نظرات : خواننده

    با سلام و عرض خسته نباشید به خاطر آموزشای خوبتون
    یه سوال داشتم. من تقریبا ۹۰% مطالب css رو عمقی یاد گرفتم.میخواستم بدونم بعد css برم سراغ jquery یا javascript یا bootstrap؟؟
    البته سوای بحث تبدیل psd به html که واسه اون برنامه جدا گونه دارم.
    با تشکر

    • م
      مدیر-محسن پور - رتبه بر اساس تعداد نظرات : تحلیلگر ویژه

      سلام
      ببینید همه این ها ربط داره به ui سایت و اگر از من می پرسیدید js یا php حتما می گفتم js
      اما چون همه این ها در یک دسته قرار می گیرن برای راهنمایی اولین چیزی که حذف می کنم jquery
      چون پیش نیازش آسنایی حتی در حد جزئی با js هست
      بین bootstrap و js انخاب با شماست
      من بوت استرپ رو انتخاب کردم چون ساده تر و در عین حال نتیجش چشم گیر تره
      مثل طراحی بسیار سریع یک سایت responsive
      استفاده ار کامپوننت های متنوع

  3. a
    afshin - رتبه بر اساس تعداد نظرات : خواننده

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

    • م
      مدیر-محسن پور - رتبه بر اساس تعداد نظرات : تحلیلگر ویژه

      سلام
      متشکرم از شما
      سعیم این هست که این دوره تا آخر تابستون تموم شه و به احتمال زیاد هم تموم میشه
      اما در رابطه با پروژه
      راستش پروژه خاصی در نظر تا الان نگرفتم و احتمالا پروزه پیاده سازی نکنم دلیلش جلوگیری از طولانی شدن فیلم
      شاید شما فکر کنید که الان دیگه نمی تونید مباحث رو عمیق یاد بگیرید
      این طور نیست
      فرض کنید شما بخواید با فراری رانندگی کنید
      اگه راننده باشید فقط کافیه که با خود ماشین آشنا بشید تا از نهایت سرعتش استفاده کنید
      نه اینکه رانندگی کردن رو یاد بگیرید
      همون طور که گفتم این دو زبان در نهایت به css تبدیل میشن
      پس حس می کنم هدر دادن وقت شماست اگر بخوام یک باره دیگه پروژه با این زبان ها پیاده کنم
      هزینه دوره هم من جوری در نظر میگیرم که واقعا مبلغ قابل توجهی نباشه
      و این از دید من فقط نخواهد بود مطمئن باشید از دید شما هم خواهد بود
      و اگر از یه حدی ببینم هزینش داره عبور می کنه جلسه ها رو رایگان منتشر می کنم تا کاربرا تحت فشار قرار نگیرن
      برای دوره css من منبعی معرفی نکردم چون بعضی از دوره ها واقعا استفاده از یک منبع کفایت نمی کنه و منابع کامل نیستن
      برای همین بیشتر منابع داخل اینترنت رو خودم بررسی کردم و در آمورش هام قرار دادم تا از گمراهی کاربرا جلوگیری کنم
      اما احتمالا دوره less و sass رو مثل دوره بوت استرپ که من قدم به قدم از خود سایت اصلی بوت استرپ درس دادم از سایت های مرجعشون درس بدم و این ها رو رفرنس کار خودم قرار بدم
      موفق باشید

  4. a
    afshin - رتبه بر اساس تعداد نظرات : خواننده

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

  5. a
    afshin - رتبه بر اساس تعداد نظرات : خواننده

    سلام آقای محسن پور
    یه سوال داشتم اگه جواب بدیذ ممنون میشم.
    برای اینکه یه طراح وب حرفه ای بشیم که از ۰ تا ۱۰۰ پروژه رو خودش انجام بده به ترتیب بغیر از این موارد چه چیز های دیگه ای لازمه
    ۰-photoshope
    ۱- html , html5
    ۲- css2,css3
    ۳- preprosessor مثل sass
    ۴- javascript
    ۵- jquery
    ۶- framework مثل بوت استرپ
    ۷- php
    ۸- framework php مثل yii یا codeigniter یا laravel
    ۹- cms مثل wordpress یا joomla
    این لیست تا چه حد درسته؟ چه چیزایی رو جا انداختم؟؟ اگه میشه راهنمایی کنید ممنونم

    • م
      مدیر-محسن پور - رتبه بر اساس تعداد نظرات : تحلیلگر ویژه

      سلام
      تسلط رو اینا شما رو به یکی از قدرت های طراحی وب تبدیل می کنه
      ولی تسلط ۸۰% به بالا منظرومه
      فتوشاپ ایده و طرح اولیه به شما میده
      html & css ساختار اصلی و ظاهر سایت شما رو تشکیل میده
      sass مثل یک نیتروژن برای یک ماشین می مونه و باعث میشه قدرت شما تو css چند برابر شه
      بوت استرپ به امکانات سایت شما اضافه می کنه و اون رو به روز یا اصطلاحا mobile-first می کنه
      js & jquery المنت های شما رو متحرک میکنه
      php و cms محتوا رو داینامیک می کنه
      و پایان خط
      از اینجا به بعد باید دانشتون رو تو استفاده از ابزار های مختلف بروز کنید تا قدرتتون تو طراحی افزایش پیده کنه
      مثل framework های php یا js

  6. پ
    پوریا - رتبه بر اساس تعداد نظرات : خواننده

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

    • م
      مدیر-محسن پور - رتبه بر اساس تعداد نظرات : تحلیلگر ویژه

      سلام
      متشکرم و خوش حالم که این آموزش ها نظر شما رو به خودش جلب کرده
      اون ها تمپلیت های foundation بودن که من به شکل عکس در آوردمشون
      می تونید داخل سایت foundation پیداشون کنید
      موفق و پیروز باشید

  7. m
    mansoureh - رتبه بر اساس تعداد نظرات : خواننده

    سلام
    ببخشید من این فایل رو دانلود میکنم ولی وقتی دانلودش کامل میشه نمیشه ازش استفاده کرد

  8. ع
    علی - رتبه بر اساس تعداد نظرات : خواننده

    اگر شما بخواهید به شخصی که میخواد شروع کنه برنامه نوسی یاد گرفتن و طرحی و امنیت ، کدوم زبون هارو به ترتیب پیشنهاد میدین برای یاد گرفتن؟
    اون جوابتون به یکی از کاربرها که گفتین js رو به php ترجیح میدین هم منو حسابی گیج کرده
    در امار سال ۲۰۱۳-۲۰۱۴ php با رتیه ششم دو پله از js بالاتره و در عین حال توی امسال محبوبیتش روز به روز بیشتر میشه

    • م
      مدیر-محسن پور - رتبه بر اساس تعداد نظرات : تحلیلگر ویژه

      بلاخره طراحی یا امنیت یا جفتش
      اگه جفتش html css js jquery bootstrap php
      اما سوال بدی
      من نگفتم js رو به php ترجیح میدم گفتم آموزش js رو در حال حاضر به php ترجیح میدم
      و حرف آخر سند حرفتون ار محبوبیت php به js?
      سند حرف(البته نزده) بنده از محبوبیت js به php در یکی از معروف ترین سایت های در زمینه برنامه نویسی در دنیا
      اگر نمی دونید js در رتبه نتها بالاتر بلکه در جایگاه اول در دنیا قرار داره و نه یک سال بلکه ۳ سال
      http://stackoverflow.com/research/developer-survey-2015

  9. ع
    علی - رتبه بر اساس تعداد نظرات : خواننده

    منبعش رو tiobe.com زده
    من دانشجو حسابداری هستم و یک ماه هست دارم برنامه نویسی رو یاد میگیرم
    فعلا در حال اطلاعات جمع کردن هستم و قطعا در مقابل شما چیزی بلد نیستم 😀
    یعنی اول برم js و j query رو یاد بگیرم ، بعدش به دوره بوت استرپ و less and sass بپردازم؟

    • م
      مدیر-محسن پور - رتبه بر اساس تعداد نظرات : تحلیلگر ویژه

      سایتی نیست که بشه بهش استناد کامل کرد
      البته من دقت به ترتیب نکردم
      ترتیب مهم نیست اما ۲ تا چیر مهم هست
      php آخر چون سنگین هست و سمت سرور
      html css اول چون پایه برنامه نویسی وب
      اما اگه ترتیب پیشنهادی بخواید ترتیب دوره هایی که خودم قرار میدم رو پیشنهاد می کنم
      چون من هدفم این هست که در نهایت به جایی برسونم که کاربر سایتم چیزی نباشه که از پس طراحیش نتونه بر بیاد

  10. ع
    علی - رتبه بر اساس تعداد نظرات : خواننده

    ممنون
    راستش من بوت استرپ هارو با اینکه هنوز نگاه نکردم اما ازتون گرفتمش
    لس اند ساس هم که دنبال میکنم
    حتما انجام میدم 🙂

  11. ع
    علی - رتبه بر اساس تعداد نظرات : خواننده

    بیش از نیم ساعت گشتم اما چیزی نیافتم :((
    فقط این رو نمایش میده
    http://www.daneshju.ir/forum/search.php?searchid=7652322

  12. ع
    علی - رتبه بر اساس تعداد نظرات : خواننده

    خیلی دوست دارم بقیه مباحث رو هم از شما یاد بگیرم 🙁

  13. ع
    علی - رتبه بر اساس تعداد نظرات : خواننده

    اهاااااا
    من نیم ساعته دنبال اموزش php میگردم 😀
    ببخشید انلاین بودنش بعنی پخش زنده؟ 😐

  14. ع
    علی - رتبه بر اساس تعداد نظرات : خواننده

    خب اونجا ۱۵ جلسه هست
    اینجا شما ۷۰ جلسه قرار دادین
    در اون قرار هست مطالب دیگه ای گفته بشه؟
    یا پروژه محور انجام بدین ؟
    لطفا تفاوت هارو با این دوره خوبتون بگین
    شاید بقیه فکر کنن من الکی مثلا دارم تعریف شما رو میدم اما برن در مورد چیزی مثل float از بقیه جاها دانلود کنن تا متوجه بشن دقیقا چیزی گفته نشه در موردش انگار
    من زبان انگلیسیم خوبخ و بعضی قسمت هارو با refrence مقایسه کردم
    شما بی نظیر توضیح میدین
    css رو تا حالا ۳ بار مرور کردم وبلاگ ازمایشی کاملی ساختم که تاییدیه هم گرفت اما باز برای بار چهارم هم باید مرور کنم چون واقعا نکته زیاد دارن اموزش هاتون 😉

    • م
      مدیر-محسن پور - رتبه بر اساس تعداد نظرات : تحلیلگر ویژه

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

  15. ع
    علی - رتبه بر اساس تعداد نظرات : خواننده

    با سلام
    اقای محسن پور شما توی اموزشتون وقتی میخواید حالت current رو شبیه سازی کنید خودتون با تعریف کردن یک کلاس اینکار رو انجام میدین اما خب وقتی من روی سایت خودتون inspect element رو انجام میدم و نگاه میکنم ، میبینم که تگ ۲ خودش به صورت اوتماتیک جا به جا میشه
    دستور خاصی داره؟ کد خاصی داره؟
    لطفا یک توضیح جامع در کل برای current ها بدین
    مثلا همین موضوع رو توی tab topic بالای سایت توی قسمت header هم هست.

  16. ع
    علی - رتبه بر اساس تعداد نظرات : خواننده

    کدی که کپی کردم باز براتون نیومده به همون دلیلی امنیتی که خودتون گفتین
    خب منظور من رو حداقل دیگه متوجه میشین
    تگ اسپنی که کلاس current داره چجور میشه که به صورت اوتوماتیک جا به جا میشه؟

    • م
      مدیر-محسن پور - رتبه بر اساس تعداد نظرات : تحلیلگر ویژه

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

  17. ع
    علی - رتبه بر اساس تعداد نظرات : خواننده

    خب کسی که جاوا یا جی کوئری بلد نیست باید چه کار کنه؟ 😀 هیچ راه دیگه ای نداره؟
    توی php با خودش تنها میشه؟

  18. ع
    علی - رتبه بر اساس تعداد نظرات : خواننده

    دوستان من یک چیز جالب رو الان متوجه شدم. گفتم که با شما به اشتراک بذارم. البته افرادی که این نظر رو میخونن
    روی قسمتی که من شکلک گذاشتم inspect element کنید بعدش تگ img که عکسی که من زدم با : D رو پیدا کنید توی قسمتی که کد های html رو نوشته
    توی اون یک ادرس زده که اولش s.w.org هست . تهش یک کد داره که ۱f600 هست اگر بجای ۶۰۰ اعداد دیگه هم بزنید (از ۳۰۰ تا ۶۴۹ ) کلی شکل براتون میاره که گویا کلا پوشش دهنده شکلک های واتساپ هست http://s.w.org/images/core/emoji/72×72/1f648.png

  19. ع
    علی - رتبه بر اساس تعداد نظرات : خواننده

    راستی اقای محسن پور
    خارج از این محدوده اگر عددی رو بزنم میره توی سایت رسمی wordpress
    چرا؟
    اصلا این مطلبی که من گفتم ارزش علمی داره؟
    یک توضیح بدید ممنون میشم :X

    • م
      مدیر-محسن پور - رتبه بر اساس تعداد نظرات : تحلیلگر ویژه

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

  20. آ
    آیدین - رتبه بر اساس تعداد نظرات : خواننده

    سلام من تمام آموزش ها رو دنبال کردم و میخاستم ازتون تشکر کنم مطلب خیلی مفیدی بود
    فقط تنها چیزی که میخاستم بدونم اینه که با چه نرم افزاری تو فیلم کد مینویسید؟ افزونه گوگل کروم هست ؟ یا نرم افزار خاصی . یه جای فیلم دیدم نوشته بود live Development ولی تو افزونه های کروم نبودش میشه بهم بگید؟

  21. a
    ahmad - رتبه بر اساس تعداد نظرات : خواننده

    سلام ممنون دادشم کمکم کردی من چطور میتونم responsive و fullشم

  22. س
    سید روح اله حسینی - رتبه بر اساس تعداد نظرات : تحلیلگر

    سلام آقای محسن پور ممنون از آموزش های دلسوزانتون
    من با اینکه کامنتهای بالا را خواندم ولی هنوز درست متوجه نشدم بعد از اتمام html , css به سراغ کدام بخش آموزشی بروم…

  23. M
    M - رتبه بر اساس تعداد نظرات : تحلیلگر ویژه

    سلام اقای محسن پور
    چه جوری میتونم منوهای کشویی رو توی css3 ریسپانسیو کنیم

  24. r
    rahim - رتبه بر اساس تعداد نظرات : خواننده

    با سلام و تشکر بابت آموزش های جالب
    می خواستم بدونم نام برنامه ای که در این آموزش ها استفاده کردید چیست

  25. پ
    پیمان - رتبه بر اساس تعداد نظرات : خواننده

    سلام، فیلم ها قابل دانلود نیستن؟ 🙁

  26. د
    دانلودنما - رتبه بر اساس تعداد نظرات : خواننده

    ممنون از مطالب خوبتون

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *