اموزش قدم به قدم طراحی سایت واکنشگرا

[danial.saeedi]

با سلام دوستان طراح!
در این تاپیک اموزش به طراحی سایت به صورت ریسپانسیو پرداخته می شود،لطفا از پرداختن به موضوعات متفرقه جولوگیری کنید.
در ضمن اگه سوالی بود من در خدمتون هستم(اگه سوالی دارین فقط مربوط به طراحی واکنشگرا باشد).

[danial.saeedi]

با افزایش کاربران تبلت و موبایل وب گردی با ان ها نیز افزایش یافته است.اگر بخواهیم برای هر نمایشگر یک صفحه به خصوص به سازیم،این کار تقریبا غیر ممکن است(مثلا سایز یک تبلت 666 باشد.)
راه حل طراحی سایت به صورت ریسپانسیو(واکنش گرا) است.این نوع طراحی با css3 انجام می شود و برای همین منظور فریم ورک هایی برای طراحی سایت به صورت ریسپانسیو ساخته شده است(مثل بوت استرت و foundation و...).که ما فقط در این اموزش با css3 اینکار را انجام می دهیم.
قبل از شروع با سایز نمایشگرها آشنا می شویم:
۳۲۰px (نمایشگرهایی که کمترین عرضشان ۳۲۰px است).
۴۸۰px (نمایشگرهایی که کمترین عرضشان ۴۸۰px است).
۶۰۰px (نمایشگرهایی که کمترین عرضشان ۶۰۰px است).
۷۶۸px (نمایشگرهایی که کمترین عرضشان ۷۶۸px است).
۹۰۰px (نمایشگرهایی که کمترین عرضشان ۹۰۰px است).
۱۲۰۰px (نمایشگرهایی که کمترین عرضشان ۱۲۰۰px است).

[danial.saeedi]

در این قسمت به مدیا کوری css3 می پردازیم.
یکی از افزوده های media،css3@ است که این افزوده به شکل یک [if] عمل می کند.اگه می خواهید بیشتر با media@ اشنا بشید به لینک روبه رو مراجعه کنید:http://www.w3schools.com/css/css_mediatypes.asp
خب الان ما با media@ اشنا شدیم،حال می خواهیم یک شرط ایجاد کنیم که اگر سایز نمایشگر از 320px کمتر بود این عملیات اجرا شود:
@media only screen and (max-width:320px)
سپس کار هایی که می خواهیم در نمایشگر 320 انجام دهیم را می نویسیم:(در این بخش می توانید سایز شی ها را کوچک یا ان ها را مخفی کنید.)

@media only screen and (max-width:320px)
{
.social
{
display:none;
}
}

[r4hgozar]

سلام دوست عزیز.
شما نوشتین
@media only screen and (max-width:320px)
این معنیش این نیست که اگه بزرگتر از این اندازه باشه؟

[danial.saeedi]

اون کوری که نوشتید مربوط به گوشی موبایل با عرض کمتر از 320px است.می تونید امتحان کنید.
در پست های بعدی،به صورت عملی با مدیا کوری کار می کنیم.

[danial.saeedi]

در این پست به فونت ها در طراحی ریسپانسیو می پردازیم.
قبلا برای تنظیم فونت ها از واحد px استفاده می کردیم که در هر نمایشگری به صورت ثابت دیده می شود.اما در واحد em فونت ها،در نمایشگر بر اساس میزان بزرگی یا کوچک بودن والد, اندازه خود را نیز تغییر میدهد.
تنها کاری که باید بکنیم اینه که px رو به em تبدیل کنیم برای این منظور به فرمول زیر نگاه کنید:
Target ÷ Context = Result
تارگت به صورت پیش فرض 24px است و قسمت Content نیز مثلا اندازه فونتی که در px استفاده کردیم را می نویسیم سپس ان ها را بر هم تقسیم و جواب به دست می اید.در اخر جواب em را می نویسیم.

<style>
h1{
font-size:1.5em;
}
h1 a{
font-size: 1em;
}
</style>

[refugee]

در این پست به فونت ها در طراحی ریسپانسیو می پردازیم.
قبلا برای تنظیم فونت ها از واحد px استفاده می کردیم که در هر نمایشگری به صورت ثابت دیده می شود.اما در واحد em فونت ها،در نمایشگر بر اساس میزان بزرگی یا کوچک بودن والد, اندازه خود را نیز تغییر میدهد.
تنها کاری که باید بکنیم اینه که px رو به em تبدیل کنیم برای این منظور به فرمول زیر نگاه کنید:
Target ÷ Context = Result
تارگت به صورت پیش فرض 24px است و قسمت Content نیز مثلا اندازه فونتی که در px استفاده کردیم را می نویسیم سپس ان ها را بر هم تقسیم و جواب به دست می اید.در اخر جواب em را می نویسیم.

<style>
h1{
font-size:1.5em;
}
h1 a{
font-size: 1em;
}
</style>


سلام فرمول درست است . اما من خیلی سرچ کردم در این مورد قبلا . و به این نتیجه رسیدم که تارگت منظورش فونت پیشفرض مرورگر دیوایس است ( که باید ذکر کنیم هر مرورگر یک فونت پیش فرض دارد . بطور مثال فونت پیش فرض موزیلا 14 پیکسل و برای گوگل کروم 16 پیکسل است. ) پس بنابراین همیشه 24 ثابت نیست .

چیزی بود که بنده تو جستجوها کشف کرده بودم .

*اگر هم من اشتباه میکنم بفرمائید این 24 پیشفرض مال چیست ؟ و چرا 24 ثابت ؟

[danial.saeedi]

سلام دوست عزیز شما درست می گید اما حرفتون مثل اینه که بگید چرا مساحت دایره رو با 3.14 به دست می یارند.
سایت های زیادی برای تبدیل px به em وجود داره که به شما کمک می کنه:
http://v1.jontangerine.com/silo/css/pixels-to-ems/
http://pxtoem.com/
موفق باشید!

[s2/mri]

سلام دوست عزیز

ضمن تشکر از شما بابت وقت و زحمتی که دارید رو این اموزش ها میکشید.

فقط یک نکته! بهتر نبود قبل ایجتد چنین تاپیکی یه سرچ میزدید . ببینید تو همین سایت چندتا تاپیک با همین عنوان زده شده مثلا لینک1 (http://barnamenevis.org/showthread.php?378702-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D8%AA%DA%A9%D9%86%DB%8C%DA%A9-responsive)، لینک2 (http://barnamenevis.org/showthread.php?397259-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-bootstrap) ، لینک3 (http://barnamenevis.org/showthread.php?378377-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%82%D8%AF%D9%85-%D8%A8%D9%87-%D9%82%D8%AF%D9%85-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B1%D8%B3%D9%BE%D8%A7%D9%86%D8%B3%DB%8C%D9%88)

یا حداقل یه چیز جدید و معرفی میکردید ،

امیدوارم تاپیک در ارائه متدهای جدید موفق باشه.



موفق باشی

[danial.saeedi]

سلام دوست عزیز ممنون از انتقاد شما!!!
سرچ نکرده بودم و الا این تاپیک رو نمی نوشتم.....
یک تاپیک دیگه دادم ببنید خوبه یا نه:
http://barnamenevis.org/showthread.php?436239-%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%D8%AA%DA%AF-video-%D9%88-%D8%B7%D8%B1%D8%B2-%D8%A7%D8%B3%D8%AA%D8%A7%DB%8C%D9%84-%D8%AF%D9%87%DB%8C-%D8%A8%D9%87-%D8%A7%D9%86!
فک نکنم تکراری باشه