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

- visibility ٣٢ mode_comment

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

مرورگرهای مخصوص 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 این حالت را نیز تعیین کنیم. مثال :

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

info نکته :

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

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

comment دیدگاه کاربران
kiansoft2000

عالی بود

yoosef

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

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

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

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

1234567890

با سلام

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

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

سید رضا

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

لقمان آوند

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

بسیار ممنون

Mohammad Mirzaei

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

نیاز به لاگین

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