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

 

مرورگرهاي مخصوص mobile و device هاي با صفحه نمايش کوچک به دليل محدوديت در اندازه ي صفحه نمايش چالشي را در طراحي style ايجاد مي کنند که همين امر باعث مي شود تا style متفاوتي را براي آنها تعريف کنيم. همانند تعريف دو style متفاوت براي print و screen. 

مثال :

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

7

 }

8

</style>

 

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

مثال :

1

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

2

}

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

مثال :

 

1

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

2

}

3

يا

4

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

5

}

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

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

مثال :

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

}

بسيار خب آموزش اين جلسه نيز به پايان رسيد و با طريقه طراحي style براي ساير deviceها نيز آشنا شديد در جلسه بعدي.........! در سري آموزشي بعدي با طريقه طراحي قالب آشنا خواهيم شد.

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

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

3. يادگيري اين آموزش ها نياز به سعي و تلاش و تمرين مستمر داره، پس هميشه يک زماني رو اختصاص بدين به تمرين اين آموخته ها.

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

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