ورود

View Full Version : آموزشی در مورد Media Types



olampiad
جمعه 12 مهر 1392, 19:13 عصر
سلام آموزشی مفصل و مفید در مورد این Media Types ها سراغ دارید.
all
aural
braille
embossed
handheld
projection
tty
tv
مــــــــــــــــــــــــ ــــــمــــــــــــــــــ ـــــــــــــــنـــــــــ ــــــــــــــــــــــــو ن

mehdi.mousavi
جمعه 12 مهر 1392, 19:30 عصر
سلام آموزشی مفصل و مفید در مورد این Media Types ها سراغ دارید.

سلام.
مطلب مفصلی در این خصوص وجود نداره، لیستی که ازش یاد کردید قصد استفاده کننده رو از اون CSS نشون میده؛ فرضا
روی Printer، تایپ print، برای صفحات نمایش رنگی کامپیوتر screen، برای تلویزیون tv و ... در نظر گرفته میشه. Specs اش (http://www.w3.org/TR/CSS2/media.html) رو
بخونید، کاملا گویاست. برای استفاده Media Type ها در Media Query ها نیز می تونید به این مقاله (http://webdesignerwall.com/tutorials/css3-media-queries) یا این مقاله (http://cssmediaqueries.com/what-are-css-media-queries.html) رجوع کنید.

موفق باشید.

olampiad
جمعه 12 مهر 1392, 22:54 عصر
ممنون از لینک هایی که گداشته بودین.
آموزش های دیگری سراغ ندارید

mehdi.mousavi
شنبه 13 مهر 1392, 07:30 صبح
ممنون از لینک هایی که گداشته بودین. آموزش های دیگری سراغ ندارید

سلام.
حقیقتش نمیدونم دنبال چی هستید، اما با همین دو تا لینک هر آنچه در این مورد هست
رو میشه فرا گرفت. ضمن اینکه باید از گوگل برای پیدا کردن پاسخ چنین سوالاتی استفاده کنید (http://lmgtfy.com/?q=media+types+tutorial).

موفق باشید.

qartalonline
شنبه 13 مهر 1392, 08:06 صبح
آموزش خاصی در این زمینه وجود نداره یعنی نیاز به آموزش نداره اصلا شما به وسیله media types میتونید تعیین کنید که فایل css برای کدوم دستگاه ها یا کدوم قسمت ها استفاده بشه.
یا به عبارت دیگه توسط media types میتونید برای هر کدام از دستگاه ها فایل css اختصاصی ایجاد کنید.

مثلا :
all: بری همه دستگاه ها
braille: برای دستگاه های لمسی
print : برای دستگاه های چاپ سند
...

در لینک زیر توضیحات مفصلی داده شده:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media

olampiad
شنبه 13 مهر 1392, 10:39 صبح
من می خوام یه سایت واسه گوشی با رزولیشن 320w*480h درست کنم.
این کد رو واسش می زارم درسته؟


@media screen and(max-width:320px;)and(max-height:480px;) and aural{
#all{
width:320px;
height:480px;
background:#CCC;
border:1px solid;
}
}


آیا لازم هستش که من از aural (یعنی مخصوص گوشی) استفاده کنمیا همان screen بسته
مـــــــــــــــــــمــــ ــــــــــــــــــــــــن ـــــــــــــــــــــــــ ــــون

olampiad
شنبه 13 مهر 1392, 10:45 صبح
یه سوال دیگه هم داشتم
یه سایت تو کامپیوتر یه شکل normal نمایش می ده.
حالا خواستم ببینم واسه گوشی یا همون تبلت بخوایم طراحیش کنیم باید همان اندازه هارو کوچیک کنیم یاچیکار کنیم.
میشه یه چند تا نمونه واسه این جور سایت ها مثال بزنید.(که هم تو سایت یه شکلی هستند و هم توی موبایل)
خیلی ممنون

qartalonline
شنبه 13 مهر 1392, 10:47 صبح
بصورت زیر بنویسید کافیه:
@media only screen and (max-width:320px) and (max-height:480px) {
#all{
width:320px;
height:480px;
background:#CCC;
border:1px solid;
}
}

olampiad
شنبه 13 مهر 1392, 10:54 صبح
بصورت زیر بنویسید کافیه:
@media only screen and (max-width:320px) and (max-height:480px) {
#all{
width:320px;
height:480px;
background:#CCC;
border:1px solid;
}
}
ممنون از پاسخ هایی که می دین.
ببخسین only تو اینجا چه مفهومی داره؟

qartalonline
شنبه 13 مهر 1392, 10:59 صبح
یه سوال دیگه هم داشتم
یه سایت تو کامپیوتر یه شکل normal نمایش می ده.
حالا خواستم ببینم واسه گوشی یا همون تبلت بخوایم طراحیش کنیم باید همان اندازه هارو کوچیک کنیم یاچیکار کنیم.
میشه یه چند تا نمونه واسه این جور سایت ها مثال بزنید.(که هم تو سایت یه شکلی هستند و هم توی موبایل)
خیلی ممنون

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

طراحی این سایتها رو خودم انجام دادم و ریسپانسیو هستند:
http://aysuweb.com/
http://irden.ca/

qartalonline
شنبه 13 مهر 1392, 11:22 صبح
ممنون از پاسخ هایی که می دین.
ببخسین only تو اینجا چه مفهومی داره؟

چندتا کلمه کلید وجود داره که only هم یکی از اون هاست.
در اینجا only باعث میشه دستگاه کاربر تنها در صورت وجود این رزولیشن این دستور رو پردازش کنه.

olampiad
شنبه 13 مهر 1392, 11:36 صبح
سلام
به این تصویر یه نگا بندازید
http://s2.picofile.com/file/7951697525/Capture.jpg
من این رو واسه یه گوشی 320 * 480 می خوام درستش کنم.
height اون رو چیکار کنم.
همون طور که می بینید تصاویر زده بیرون.
آیا hright اون رو auto بدم یا به کل دایوم overflow رو scrool بدم
ممنون

qartalonline
شنبه 13 مهر 1392, 11:43 صبح
ارتفاع رو auto بذارید یا 100% اگه محتواش زیاد بشه خودش scroll میاره.

olampiad
شنبه 13 مهر 1392, 14:14 عصر
سلام
لطفا به این کد ها یه نگا بندازید
تو اینجا من می خوام این سایت رو به سه قالب(حالت های گوشی 340*480 و تبلت 740 *1024 و کامپیوتر 1320 و 750) ریسپانسیو کنم.
می خوام این قالب رو به سه تا قالب تبذیل کنم.
ولی به طور کلی گیج شدم.

برای تبدیل کردن باید موبه مو تبذیل کنم.
یا روش ساده تری وجود داره
ممنون

olampiad
دوشنبه 15 مهر 1392, 20:04 عصر
می شه یه چند تا نمونه قالب برای نمای تبلت و گوشی مثال بزنید.
می خوام از روی قالب ها الگو بگیرم.
ممنون

olampiad
دوشنبه 15 مهر 1392, 20:09 عصر
یه سوال دیگه هم داشتم
تو نمای پرینت چه چیزایی رو حدف می کنن.
آیا تو نمای پرینت فقط متن ها قابل نمایش هستند.
ممنون

olampiad
دوشنبه 15 مهر 1392, 20:18 عصر
یه سوالم در مورد ریسپانسیو:
تو ریسپانسیو کردن فقط قرار گیری دایو هارا تغییر می دهیم یا
اندازه فونت هارو هم تغییر می دیم.(کوچک کردن فونت ها)
ممنون

qartalonline
دوشنبه 15 مهر 1392, 20:41 عصر
می شه یه چند تا نمونه قالب برای نمای تبلت و گوشی مثال بزنید.
می خوام از روی قالب ها الگو بگیرم.
ممنون

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

qartalonline
دوشنبه 15 مهر 1392, 20:43 عصر
یه سوال دیگه هم داشتم
تو نمای پرینت چه چیزایی رو حدف می کنن.
آیا تو نمای پرینت فقط متن ها قابل نمایش هستند.
ممنون

بهتره تو نمای پرینت و اطلاعات مورد نیاز نمایش داده بشن.
هنگام پرینت سایه ها و پس زمینه حذف میشن. و متن ها و تصاویر چاپ میشن.

qartalonline
دوشنبه 15 مهر 1392, 20:44 عصر
یه سوالم در مورد ریسپانسیو:
تو ریسپانسیو کردن فقط قرار گیری دایو هارا تغییر می دهیم یا
اندازه فونت هارو هم تغییر می دیم.(کوچک کردن فونت ها)
ممنون

میشه در حدود 1 یا 2 پیکسل یا بیشتر (بستگی داره) سایز فونت را کوچک کرد.

olampiad
دوشنبه 15 مهر 1392, 21:01 عصر
بهتره تو نمای پرینت و اطلاعات مورد نیاز نمایش داده بشن.
هنگام پرینت سایه ها و پس زمینه حذف میشن. و متن ها و تصاویر چاپ میشن.

می خوام واسه سایتم یه نمای پرینت با استفاده از media query ها بنویسم.
خواستم ببینم چه چیز هایی رو باید حذف کنم.
تا با کاغذ کم اطلاعات بیشتری رو دریافت کننو.
آیا باید قسمت sitebar رو هم حذف کنم
ممنون

qartalonline
دوشنبه 15 مهر 1392, 21:08 عصر
می خوام واسه سایتم یه نمای پرینت با استفاده از media query ها بنویسم.
خواستم ببینم چه چیز هایی رو باید حذف کنم.
تا با کاغذ کم اطلاعات بیشتری رو دریافت کننو.
آیا باید قسمت sitebar رو هم حذف کنم
ممنون

بهتره قسمت هدر ، فوتر ، منوی ناوبری ، و ستونهای کناری رو حذف کنید.
کافیه اطلاعات پرینت شده شامل عنوان محتوای پرنیت ، لوگوی سایت(در صورت نیاز) و محتوای اصلی ، بصورت منظم باشد.

olampiad
چهارشنبه 17 مهر 1392, 11:26 صبح
سلام
من می خوام یه قالب ساده طراحی کنم و بعد اون رو به سه حالت گوشی و تبلت و کامپیوتر تبدیل کنم.
یه سوال داشتم.
من تو طراحی این قالب ساده چه کارایی رو باید انجان بدم یا چه استاندارد هایی رو رعایت کنم،که بعدا هنگام تبدیل اون به گوشی و تبلت به مشکل بر نخورم.
مثل width یا height رو چه جوری باید قرار بدم.
مـــــــــمـــــــــــــن ــــــــــــــون

qartalonline
چهارشنبه 17 مهر 1392, 12:01 عصر
بهتره از ابتدا قالب رو بصورت ریسپانسیو طراحی کنید. و برای عرضها از % استفاده کنید. البته همه جا شاید نیاز نباشه بسته به نیازتون استفاده کنید.