آموزشی در مورد Media Types

[olampiad]

سلام آموزشی مفصل و مفید در مورد این Media Types ها سراغ دارید.
all
aural
braille
embossed
handheld
projection
tty
tv
مــــــــــــــــــــــــ ــــــمــــــــــــــــــ ـــــــــــــــنـــــــــ ــــــــــــــــــــــــو ن

[mehdi.mousavi]

سلام آموزشی مفصل و مفید در مورد این 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]

ممنون از لینک هایی که گداشته بودین.
آموزش های دیگری سراغ ندارید

[mehdi.mousavi]

ممنون از لینک هایی که گداشته بودین. آموزش های دیگری سراغ ندارید

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

موفق باشید.

[qartalonline]

آموزش خاصی در این زمینه وجود نداره یعنی نیاز به آموزش نداره اصلا شما به وسیله media types میتونید تعیین کنید که فایل css برای کدوم دستگاه ها یا کدوم قسمت ها استفاده بشه.
یا به عبارت دیگه توسط media types میتونید برای هر کدام از دستگاه ها فایل css اختصاصی ایجاد کنید.

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

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

[olampiad]

من می خوام یه سایت واسه گوشی با رزولیشن 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]

یه سوال دیگه هم داشتم
یه سایت تو کامپیوتر یه شکل normal نمایش می ده.
حالا خواستم ببینم واسه گوشی یا همون تبلت بخوایم طراحیش کنیم باید همان اندازه هارو کوچیک کنیم یاچیکار کنیم.
میشه یه چند تا نمونه واسه این جور سایت ها مثال بزنید.(که هم تو سایت یه شکلی هستند و هم توی موبایل)
خیلی ممنون

[qartalonline]

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

[olampiad]

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

[qartalonline]

یه سوال دیگه هم داشتم
یه سایت تو کامپیوتر یه شکل normal نمایش می ده.
حالا خواستم ببینم واسه گوشی یا همون تبلت بخوایم طراحیش کنیم باید همان اندازه هارو کوچیک کنیم یاچیکار کنیم.
میشه یه چند تا نمونه واسه این جور سایت ها مثال بزنید.(که هم تو سایت یه شکلی هستند و هم توی موبایل)
خیلی ممنون

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

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

[qartalonline]

ممنون از پاسخ هایی که می دین.
ببخسین only تو اینجا چه مفهومی داره؟

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

[olampiad]

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

[qartalonline]

ارتفاع رو auto بذارید یا 100% اگه محتواش زیاد بشه خودش scroll میاره.

[olampiad]

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

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

[olampiad]

می شه یه چند تا نمونه قالب برای نمای تبلت و گوشی مثال بزنید.
می خوام از روی قالب ها الگو بگیرم.
ممنون

[olampiad]

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

[olampiad]

یه سوالم در مورد ریسپانسیو:
تو ریسپانسیو کردن فقط قرار گیری دایو هارا تغییر می دهیم یا
اندازه فونت هارو هم تغییر می دیم.(کوچک کردن فونت ها)
ممنون

[qartalonline]

می شه یه چند تا نمونه قالب برای نمای تبلت و گوشی مثال بزنید.
می خوام از روی قالب ها الگو بگیرم.
ممنون

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

[qartalonline]

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

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

[qartalonline]

یه سوالم در مورد ریسپانسیو:
تو ریسپانسیو کردن فقط قرار گیری دایو هارا تغییر می دهیم یا
اندازه فونت هارو هم تغییر می دیم.(کوچک کردن فونت ها)
ممنون

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

[olampiad]

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

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

[qartalonline]

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

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

[olampiad]

سلام
من می خوام یه قالب ساده طراحی کنم و بعد اون رو به سه حالت گوشی و تبلت و کامپیوتر تبدیل کنم.
یه سوال داشتم.
من تو طراحی این قالب ساده چه کارایی رو باید انجان بدم یا چه استاندارد هایی رو رعایت کنم،که بعدا هنگام تبدیل اون به گوشی و تبلت به مشکل بر نخورم.
مثل width یا height رو چه جوری باید قرار بدم.
مـــــــــمـــــــــــــن ــــــــــــــون

[qartalonline]

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