هادی خانزاده

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

11 پست در این موضوع قرار دارد

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

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

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

به اشتراک گذاری این پست


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

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

به اشتراک گذاری این پست


لینک به پست

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

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

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

به اشتراک گذاری این پست


لینک به پست

این مجموعه فکر کنم به دردتون بخوره :

http://p30download.com/fa/entry/46028/

به اشتراک گذاری این پست


لینک به پست

من عرض صفحه رو همیشه 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

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط devil1367
      با سلام
      من یک فروشگاه دارم چون قالب قبلیم نیازهامو نمیتونست برطرف کنه یه قالب جدید از یکی از سایتها خریداری کردم
      سوالم اینه با نصب بسته اسان نصب اطلاعاتی یا محصولات قبلی که داشتم حذف میشن ؟
      چطوری قالب رو شبیه دمو دربیارم و صفحات و برگه ها import کنم.
       
      با تشکر
    • توسط armakcell
      با سلام بنده در سایتم میخواستم یک ابزارک قرار بدم مانند ابزارک این سایت
      http://powerturk.ir

      اگر داخل این سایت برید در یک قسمت نوشته است آرشیو فول البوم
      بنده این ابزارک را چگونه به دست بیارم؟
      بنده یک تصویر ضمیمه میکنم در صورتی که در سایت وارد نشد

    • توسط amir_hossein
      سلام دوستان من قصد دارم چندتا اسلاید کناره هم به صورت خطی (مثلا 4 تا اسلاید) اواسط صفحه اصلی یا انتهای صفحه قرار بدم.افزونه ای میتونید بهم معرفی کنید برای اینکار؟
    • توسط amir_hossein
      سلام دوستان من قصد دارم چندتا اسلاید کناره هم به صورت خطی (مثلا 4 تا اسلاید) اواسط صفحه اصلی یا انتهای صفحه قرار بدم.افزونه ای میتونید بهم معرفی کنید برای اینکار؟
    • توسط mosi1672
      سلام 
      من یه سایتی دارم که برای همایش علمی مقالات رو با فرمی که با افزونه گرویتی فرم ساخته شده دریافت میکنم.
      خواستم بدونم آیا راهی وجود داره که امار مقالات دریافتی رو به صورت داینامیک و پویا بتونم با روی سایت اصلی نشون بدم؟ البته با ظاهر زیبا
      مثل این سایت تایپ ایران که امار پروژه ها و کاربرانش رو به صورت نمودار دایره ای نشون میده..
      این ادرس سایت :
      ادرس فرم:http://ihsc.bsbmu.ir/maghaleh/
      ادرس سایت:http://ihsc.bsbmu.ir/

      میدونم خیلی ساده گفتم ولی اگر امکان داره راهنمایی بفرمایید