خانه / مقالات اموزشی / css / آموزش CSS خصوصیت Media

آموزش CSS خصوصیت Media

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

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

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

 

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

تعیین شرط در media

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

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

 

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

نکته : همیشه قبل از عبارت screen کلمه only قرار دهید، (جهت کار کردن کد در مرورگرهای قدیمی)
مثال :
بسیار خب آموزش این جلسه نیز به پایان رسید و با طریقه طراحی style برای سایر deviceها نیز آشنا شدید در جلسه بعدی………! در سری آموزشی بعدی با طریقه طراحی قالب آشنا خواهیم شد.

منبع :۷learn

اموزش طراحی سایت

آموزش طراحی سایت

اموزش طراحی وب سایت

آموزش طراحی سایت

درباره آموزشگاه نوین آی تی

همچنین ببینید

نحوه نام گذاری متغییر های جاوا

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

پاسخ دهید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net