مرورگرهای مخصوص 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 حداکثر اندازه ی صفحه نمایش را مشخص می کند که در موبایل های پیشرفته امروزی معمولا ۴۸۰pixel می باشد.
تعیین شرط در media
همانطور که در قسمت بالا گفتیم، بهترین روش طراحی برای دیگر دستگاه ها استفاده از max و min-width می باشد، طریقه ایجاد شرط برای تعیین این دو خصوصیت استفاده از and و سپس آوردن شرط در داخل پرانتز است
مثال :
همانطور که می دانید، بعضی از دستگاه های موبایل حالت افقی نیز دارند، در این حالت عرض دوباره تغییر خواهد کرد، پس بهتر است 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 قرار دهید، (جهت کار کردن کد در مرورگرهای قدیمی)
مثال :
