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

 

 

مرورگرهاي مخصوص mobile و device هاي با صفحه نمايش کوچک به دليل محدوديت در اندازه ي صفحه نمايش چالشي را در طراحي style ايجاد مي کنند که طراحی وب سایت  همين امر باعث مي شود  در موبايل و device هاي با صفحه نمايش کوچک مي توان از mediaي handheld استفاده کرد اما در عمل تعداد کمي از موبايل ها از اين media پشتيباني مي کنند..

مثال :

1

<style type="text/css" media="screen and (max-width: 480px)"> ... </style>

2

يا

3

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

4

يا

5

<style type="text/css">

6

 @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) {

2

}

همانطور که مي دانيد، بعضي از دستگاه هاي موبايل حالت افقي نيز دارند، در اين حالت عرض دوباره تغيير خواهد کرد، پس بهتر است 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ها نيز آشنا شديد در جلسه بعدي.........! در سري آموزشي بعدي با طريقه طراحي قالب آشنا خواهيم شد.

حال که اين سري به پايان رسيد لازم دونستم چند نکته رو يادآوري کنم :

2. دليل دير آپ شدن اين سري بعضي مشکلات خصوصي، و مشغله هاي کاري بوده اگه کسي از دوستان ناراحت شده از اين موضوع، ازش عذرخواهي مي کنم.

4. سري آموزشي طراحي قالب نيز، ايشالا به زودي شروع ميشه.

اميدوارم که از اين سري آموزشي نهايت بهره رو برده باشين. اگر سوالي داشتين ميتونيد در بخش نظرات مطرح کنيد.