رفتن به مطلب

روشهای طراحی واکنشگرا


پست های پیشنهاد شده

با عرض سلام و خسته نباشید

من در مورد طراحی واکنش گرا ( Responsive ) خیلی گشتم ولی به ی منبعدرست و حسابی اموزشی دست پیدا نکردم همه آموزش ها به نحوی دارای نقاط کور زیادی بودن که متاسفانه توسط آموزش دهنده برطرف نشده بود و تا اونجایی که فهمیدم برای طراحی یک قالب واکنشگرا باید از فریم ورک ها استفاده کنیم ولی الان بنده با Media Screen تو CSS میتونم رزولیشن مانیتور یا سایر دستگاه ها رو بدم و براشون CSS بنویسم تست هم کردم و قالبی که طراحی کرده بودم تو گوشی سونی اکسپریا V به طوری که خودم استایل داده بودم نشون داد و در مانیتور به شکل دیگه که بازم خودم ی استایل دیگه داده بودم نشون داد . ینی نمایش درست بود. ولی حالا موندم که با وجود مدیا اسکرین چرا باید از فریم ورک ها استفاده کنیم؟؟؟ دلیل خاصی داره؟؟ ی جا هم خوندم نوشته بود که وقتی فقط با مدیا اسکرین کدها رو مینویسیم قالب میشه انطباقی ولی وقتی از فریم ورک ها استفاده میکنیم میشه واکنشگرا . در کل عزیزان بدجور گیج شدم در حد لالیگا ممنون میشم یکی قشنگ توضیح بده تا ببینیم درد این واکنشگرا و انطباقی چیه.

با تشکر فراوان

لینک به ارسال
جا هم خوندم نوشته بود که وقتی فقط با مدیا اسکرین کدها رو مینویسیم قالب میشه انطباقی ولی وقتی از فریم ورک ها استفاده میکنیم میشه واکنشگرا .

تا اونجا که بنده اطلاع دارم با استفاده از مدیا اسکرین شما میتونید براش از قبل تعریف کنید که در فلان اسکرین اینطوری نمایش بده . اما از طریق فریم ورک میشه طوری طراحی کرد که بصورت داینامیک با تغییر اندازه نمایشگر محتویات تغییر کنن و مکان آیتم ها هم تغییر کنه . اینطوری لازم نیست رزلوشن خاصی رو نام ببرید . صفحه با توجه به رزلوشن نمایشگر اندازه لازم رو تعیین میکنه و نمایش میده .

لینک به ارسال

خیلی ممنونم که جواب دادید یه جورایی میشه گفت افتاد!!!!

فقط ی سایت یا ی منبع آموزشی میشناسید که طراحی ریسپانسیو رو درست و حسابی یاد بده؟؟؟

با تشکر فراوان

لینک به ارسال

من عرض صفحه رو همیشه 980px انتخاب میکنم.

اگه بخوام از % استفاده کنم جای 980px باید چند درصد بذارم تا اندازه اون به 980px برسه؟

لینک به ارسال

دوست من سایتی است که قرار است آموزش طراحی ریسپانسیو به زبان فارسی به صورت فیلم قرار بده ولی فعلا خبری نیست.پیشنهاد می کنم حتما به سایت سر بزنی تا ببینی که قرار است این آموزش را بگذارند.


http://netpixel.ir/

البته این صفحه آپارات هم هست.


http://www.aparat.com/GolsaSoft

ویرایش شده توسط alireza1375
لینک به ارسال

تا اونجا که بنده اطلاع دارم با استفاده از مدیا اسکرین شما میتونید براش از قبل تعریف کنید که در فلان اسکرین اینطوری نمایش بده . اما از طریق فریم ورک میشه طوری طراحی کرد که بصورت داینامیک با تغییر اندازه نمایشگر محتویات تغییر کنن و مکان آیتم ها هم تغییر کنه . اینطوری لازم نیست رزلوشن خاصی رو نام ببرید . صفحه با توجه به رزلوشن نمایشگر اندازه لازم رو تعیین میکنه و نمایش میده .

خیر فرقی نمیکنه با مدیا اسکرین هم میشه ریسپانسیو داینامیک درست کرد فرقش با استفاده از فریم ورک اینکه فریم ورک ها کار رو راحت میکنن و نیازی نیست که دیگه کد بنویسیم و با استفاده از کلاس ها از تکرار جلوگیری میکنیم ...

لینک به ارسال

من عرض صفحه رو همیشه 980px انتخاب میکنم.

اگه بخوام از % استفاده کنم جای 980px باید چند درصد بذارم تا اندازه اون به 980px برسه؟

دوست عزیز چنین چیزی غیر ممکنه!

شما نمیدونید که سایز مانیتور کاربرتون در چه حدیه که بگید مثلا 80% از کل اسکرین میشه حدود 900px یا.....

باید اینجوری عمل کرد:


.example{
width:85%;
max-width:980px
}

لینک به ارسال

منظورم اینه وقتی تو فتوشاپ با پیکسل کار میکنیم و وقتی میخوایم اونو به css تبدیل کنیم به مشکل برمیخوریم.

مثلا 250 پیکسل رو نمیدونم چند % بذارم.؟

لینک به ارسال

منظورم اینه وقتی تو فتوشاپ با پیکسل کار میکنیم و وقتی میخوایم اونو به css تبدیل کنیم به مشکل برمیخوریم.

مثلا 250 پیکسل رو نمیدونم چند % بذارم.؟

دوست عزیز % که شما میدید بر اساس المان مادر سایزی برای عنصر شما در نظر گرفته میشه!

حالا اگه المان مادر خود بر حسب % باشه عنصر داخلی شما هم سایزش تغییر میکنه!(البته با تغییر سایز صفحه)

مقدار % هم نمیتونه ثابت باشه چون بستگی به همین مورد داره که عنصر شما یکی از المان های اصلیه صفحه هستش یا....!

مقایسه % و px مثل مقایسه واحد شمارش دما و زمان میمونه! :D

لینک به ارسال

16px 1em 12pt 100%

همه واحد ها معادل هم هستند اما

فرمول محاسبه برای طراحی واکنش گرا هم فوتوشاپ

اگر عرض کلی 940 باشه عرضی که می خوای مثلا 320 پیکسل ضربدر 100 می کنی تقسیم بر عرض کلی یعنی 940 میکنی

اون عرض کلی باید همیشه باشه

پس شما باید یک width کلی total داشته باشی و target width

width target *100

---------------------------

width total

ویرایش شده توسط reazah
لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...