طراحی وب سایت

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

مثال :

 

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

 

 

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

 

</style>

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

تعيين شرط در media

 

 

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

مثال :

1

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

2

}

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

 

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

1. همه آموزش هايي که قرار دادم، آموخته هاي شخصي خودم بوده، و از جايي کپي پيست نشده /پاسخ بعضي از دوستان قدرشناس! که پيغام خصوصي داده بودند، "چرا دير آپ ميشه آموزش سي اس اس. يه کپي پيست کردن از مطالب بقيه که اين همه وقت نميخواد."

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

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

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

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