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

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۱۶ خرداد ۱۳۹۲

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

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

<style type="text/css" media="screen and (max-width: 480px)"> ... </style>
یا
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="style.css" />
یا
<style type="text/css">
@media screen and (max-width: 480px) {
}
</style>

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

تعیین شرط در media

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

@media screen and (max-width: 480px) and (min-width: 320px) {
}

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

@media screen and (max-width: 480px) and (min-width: 320px) and (orientation: portait) {
}
یا
@media screen and (max-width: 480px) and (min-width: 320px) and (orientation: landscape) {
}

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

نکته :

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

@media only screen and (max-width: 480px) {

}

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

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

Mohammad Mirzaei

این اموزش واقعا به دردم خورد ممنون

اکبر قره باغی

بسیار ممنون

سید رضا

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

لقمان آوند

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

1234567890

با سلام

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

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

mohcen

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

لقمان آوند

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

yoosef

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

لقمان آوند

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

kiansoft2000

عالي بود

lili

میشه آموزشهایی در مورد سئو و اینکه کلمات کلیدی چطور انتخاب بشه داشته باشید؟

کیوان علی محمدی

این مطالب رو بخونید.

elham.e

محشرررررر بوووود
مرسی 😛

omid

این همه مقاله عالی دارین ظاهر و گرافیک سایتتون افتضاحه
بابا فکری به حالش بکنید

کیوان علی محمدی

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

حسن

ايوووووووووووول از فردا شروع ميشه!
اگه تبديلش به وردپرس هم باشه ديگه واقعا عاليييييييي ميشه ! دمت گرم !

سجاد دریس

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

حسن

سلا داش وحيد ! خبري ازت ني !
داداش تو ميخواي چي آموزش بدي ؟

سجاد دریس

سلام.
بذارید شروع بشه اول هنوز هیچی معلوم نیست.
پس فردا اولین جلسه اش رو میذارم، این موارد رو توضیح میدم.

SAjjADma

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.