شروع طراحی رسپانسیو با سی اس اس 3 تعداد بازدیدvisits : 909
|
|||||||||||
majid
![]() ![]() ![]()
|
شروع طراحی رسپانسیو با سی اس اس 3 سلام امروز قسمت اول رو شروع میکنم: ابتدا برای تعیین عرض بلوک ها از % به جای px لستفاده کنید این کار دومزیت دارد 1.در تمام مرورگرها به اندازه مورد نظر نمایش داده می شود(بعضی قالب ها توی اپرا و کروم کمی اختلاف عرض دارند) 2.در تمام نمایشگرهای بزرگتر از 1025 قالب شما به همان اندازه در میاید نمونه: کد:
ولی برای اینکه قالب درنمایشگرهای کوچکتر از 950 یا 450 px واکنش گرا باشد باید از کدهای مدیا اسکرین استفاده نمایید که در همین تاپیک در ادامه آموزش خواهم گذاشت (درصورت روحیه دادن کاربران) توجه: حال ندین حال نمیدم مجبورم نیستم حال بدم نظراتتونو بگید |
||||||||||
چهارشنبه 01 مرداد 1393 - 21:45 |
|
![]() |
سپاس هاThanks (3) : mahan12 - takbook2013 - ehsan123 - |
admin
![]() ![]() ![]() ![]() ![]() ![]()
|
پاسخAnswer 1 : شروع طراحی رسپانسیو با سی اس اس 3 آقا حال دادن چیه :دی تو مملکت اسلامی میخوای حال کنی؟ :دی درصد توی واکنشگرا زیاد باحال نمیشه ... توی مانیتور های بزرگ هیکلی میشه :دی از media بهتره استفاده کردن ... با تشکر ![]() ![]() ![]() !Whatever you DISRESPECT, you'll never have the ability to ACCESS
|
||||||||
چهارشنبه 01 مرداد 1393 - 22:02 |
|
takbook2013
![]() ![]() ![]()
|
پاسخAnswer 3 : شروع طراحی رسپانسیو با سی اس اس 3 داداش مجید دمت گرم ادامه بده |
||||||||
چهارشنبه 01 مرداد 1393 - 22:18 |
|
majid
![]() ![]() ![]()
|
پاسخAnswer 4 : شروع طراحی رسپانسیو با سی اس اس 3نقل قول از moisrexمنم نوشتم میشه ازمدیا استفاده کرد من که توی مانیتور بزرگ استفاده کردم بهتر نشون داد کل عرض قالب اندازش شد حال داریم تا حال عزیزم مگه عرفای بزرگ حال نمیکردن؟ وقتی میبینی یکی یه پست راجب عکسش میزاره 5 صفحه پاسخ و اسپم زدن میای یه پست مفید بزاری 5 نظرو اسپم باشه ضدحاله اگه بعضی سو استفاده گرا نباشن سه چهارتا کد از سایته دیگه چاشنیه قالب میکنن میدن دست مشتری و برای طراحی قالب قیمت گزاف میگیرن بیان واکنش گراروهم تمیز یادبگیرن قیمتاشون بیشتر میشه (البته کسی که کدنویسه فرق داره قضیش) حالا بگذریم ادامشو بعد میزارم امیدوارم این آموزش باعث سو استفاده بعضی ها نشه محمد جان در ضمن برای نمایشگر های بزرگ شما راهنمایی کن باید مثل نمایشگرهای کوچک توی مدیا استفاده کرد؟(یه خوبی اموزش دادن اینه مشکلات خودتو میفهمی و اطلاعات خودتم بیشتر میشه) |
||||||||||
پنجشنبه 02 مرداد 1393 - 07:43 |
|
majid
![]() ![]() ![]()
|
پاسخAnswer 5 : شروع طراحی رسپانسیو با سی اس اس 3نقل قول از takbook2013چشم بعدا قسمتا دیگه رو میزارم |
||||||||||
پنجشنبه 02 مرداد 1393 - 07:45 |
|
admin
![]() ![]() ![]() ![]() ![]() ![]()
|
پاسخAnswer 6 : شروع طراحی رسپانسیو با سی اس اس 3نقل قول از majidیه روش استفاده اینه که از درصد ها کمک بگیری که توی اندازه های خیلی کوچیک و اندازه های خیلی بزرگ خیلی بد از آب در میاد.نقل قول از moisrexمنم نوشتم میشه ازمدیا استفاده کرد مثلا همین لینک باکس منو اگر با نمایشگر بزرگ ببینیدش یکم بزرگه با وجود این که با مدیا کوچیک ترش کردم. (توی فایرفاکس کنترل شیفت m رو بزنید.) ولی این دو تا اصل ماجرا نیستن ... ترفند های دیگه ای هم هستن. مثل استفاده از درصد به جای پیکسل در فونت ها یا استفاده از overflow کنار float برای وقتی که مثلا میخوای یه متنو کنار یه تصویر بذاری یا مثلا استفاده از background-size برای پس زمینه ها (که پیشنهاد نمیشه) یا ... حتی توی جاوا اسکریپت هم میشه کدهای media رو شبیه سازی کرد. اما به وقت و کاری که براش میذاری نمی ارزه که بیخوای برای مرورگر های قدیمی که از سی اس اس سه پشتیبانی نمی کنن هم کد بنویسی در حالی که نصف قالبت با سی اس اس سه هست ... اما اگر این همه کد رو استفاده کنین تا وقتی که متا تگ viewport رو استفاده نکنین انگار تقریبا هیچ کاری نکردین ... چون مرورگر کاربر خودش یه زوم اوت می کنه خودکار تا صفحه رو مثل این صفحه مانیتور بزرگ کنه و با viewport میشه زوم رو درست کرد تا بقیه صفحه متناسب بشن. البته بعضی از سایت ها دیگه خیلی عمیق از واکنشگرا استفاده می کنن به طوری که اگر کاربر یه مرورگر قدیمی داشته باشه که سی اس اس سه رو پشتیبانی نکنه و صفحه نمایشش هم کوچیک باشه (حتی همین مانیتورای آماتور قدیمی که خیلی بزرگن ولی صفحه نمایششون کوچیه هم رزولیشن پایین دارن تصویر بزرگ میشه ، میشه مثل یه تبلت تقریبا) اسکرول بار مرورگر 6 کیلومتر میشه ... یکی از بد ترین قسمت هایی که من خیلی بدم میاد توی ریسپانسیو ، ریسپانسیو کردن منوی navigation هست که لینک ها توشه. بعضیا میان با جاوا اسکریپت اون لینک ها رو به صورت یه دکمه در میارن که بعدش باز میشه. بعضی ها هم همین کارو با سی اس اس انجام میدن که البته طرح ریزیش یه الگوی خاص باید داشته باشه تا با کمترین کد بتونی مشکلو بر طرف کنی بعضی ها همینجوری به صورت کاتوره ای میان از float استفاده می کنن هر چی شد شد ... بعضی ها هم از display:inline-block من جدیدا خیلی میبینم که مثلا بعضی ها از inline-block و خاصیت box-sizing و اینجور چیزا خیلی استفاده می کنن. فقط باید بهشون بگم بهتره از این ها استفاده نکنین سی اس اس خودش برای دور زدن اینا کد داره فقط یکم سخته به دست آوردن اعداد دقیقش و یکمی اعدادش رند نمیشن مخصوصا وقتی با padding و margin کار می کنی ... توی یه مرورگری که سی اس اس سه پشتیبانی نمیشه قالب چنین کسایی میشه طویله ... متاسفانه اینترنت اکسپلورر های ورژن پایین و فایرفاکسی مثل فایرفاکس 3.6 و اینجور مرورگر های قدیمی که که مشکلاتی دارن توی کافی نت ها زیاده ... کافی نتی ها هم عین بز فقط فکر فریزر و آنتی ویروس کامپیوترشونن ... :دی با تشکر ![]() ![]() ![]() !Whatever you DISRESPECT, you'll never have the ability to ACCESS
|
||||||||
پنجشنبه 02 مرداد 1393 - 11:48 |
|
![]() |
سپاس هاThanks (1) : majid - |
amirmohsen
![]() ![]() ![]() ![]() ![]()
|
پاسخAnswer 7 : شروع طراحی رسپانسیو با سی اس اس 3 عجب! ممد دستات آتیش نگرفت؟؟؟ :)
|
||||||||
پنجشنبه 02 مرداد 1393 - 12:11 |
|
majid
![]() ![]() ![]()
|
پاسخAnswer 8 : شروع طراحی رسپانسیو با سی اس اس 3نقل قول از moisrexنقل قول از majidیه روش استفاده اینه که از درصد ها کمک بگیری که توی اندازه های خیلی کوچیک و اندازه های خیلی بزرگ خیلی بد از آب در میاد.نقل قول از moisrexمنم نوشتم میشه ازمدیا استفاده کرد یه روش استفاده اینه که از درصد ها کمک بگیری که توی اندازه های خیلی کوچیک و اندازه های خیلی بزرگ خیلی بد از آب در میاد. مگه اندازه کوچک تر از 450 هم داریم؟ واسه تلفن های حالا خوبه یه بچه 7 ساله تو خیابون تبلت دستشه مثل پسرخاله من 12 سالشه تبلت داره یکی از بد ترین قسمت هایی که من خیلی بدم میاد توی ریسپانسیو ، ریسپانسیو کردن منوی navigation هست که لینک ها توشه. میشه مخفیش کرد با مدیا اکثر قسمت های غیر ضروری رو میشه مخفی کرد مثل اسلایدر و... خوب طرف باگوشی میاد اینارو میخاد چکار؟
اما به وقت و کاری که براش میذاری نمی ارزه که بیخوای برای مرورگر های قدیمی که از سی اس اس سه پشتیبانی نمی کنن هم کد بنویسی در حالی که نصف قالبت با سی اس اس سه هست ... سعی میکنم جاهایی رو سی اس اس 3 کنم که پشتیبانیش تویه مرورگرهایی که پشتیبانیش نمیکن مشکل پیش نیاد من بیشتر برا رسپانسیو سی اس اس 3 استفاده میکنم تویه مرورگر گوشی هم تست کردم خوب بود خوب پشتیبانی نکنه رسپانسیو پر اکثر کاربرا هم با مرورگرهای کروم میان یا فایر فاکس اونایی که اکسپوور دارن کار بانت بلد نیستن (این کاربرها هم کم نیستن) نیم ساعت طول میکشه بالا بیاره صفحه رو ولی من متا تگ viewport گذاشتم ممنون برا توضیح کامل ان شاء الله توی تاپیک دیگه ادامه رو میزارم لطفا نظراتتون رو بگید راجب اموزش (نه ممنون و ادامه بدید و اینا بیشتر مشکلات رو بگید تا اموزش بهتر و کاملی بشه ) |
||||||||||
پنجشنبه 02 مرداد 1393 - 23:25 |
|
amireza1
![]() ![]() ![]()
|
پاسخAnswer 9 : شروع طراحی رسپانسیو با سی اس اس 3 محمد این همه کلمه رو از کجا میاری؟:دی به من هم یاد بده مثلا میخوام یه پست ارسال کنم هیچ توضیحی نمینویسم :دی |
||||||||
پنجشنبه 02 مرداد 1393 - 23:37 |
|
amireza1
![]() ![]() ![]()
|
پاسخAnswer 10 : شروع طراحی رسپانسیو با سی اس اس 3 ممنون از استارتر تایپک.... |
||||||||
پنجشنبه 02 مرداد 1393 - 23:38 |
|
admin
![]() ![]() ![]() ![]() ![]() ![]()
|
پاسخAnswer 11 : شروع طراحی رسپانسیو با سی اس اس 3
مگه اندازه کوچک تر از 450 هم داریم؟ واسه تلفن های حالا خوبه یه بچه 7ریسپانسیو بعضی مواقع فقط برای تلفن ها نیست. مثلا مثل لینک باکس کدستان ... توی بعضی از سایت ها بری یه اندازه 100 در 200 گذاشتن که اگر اون ریسپانسیو نبود اونجوری داغون میشد ... میشه مخفیش کرد با مدیا اکثر قسمت های غیر ضروری رو میشه مخفی کرد مثل اسلایدر و... خوب طرف باگوشی میاد اینارو میخاد چکار؟مگه حالت بده مخفی کنی؟ اونا لینک های دسترسی به بقیه وب هستن اون وقت یکی خواست با موبایل بره بقیه وبو ببینه چه بوووقی باید بخوره؟ :دی البته یا راهی هم هست که از آیکون به جای متن یا در کنار متن استفاده کنی. مثل همون لینک باکس که آیکون داره متن هم داره وقتی اندازه ها خیلی کوچیک میشه متن ها حذف میشن فقط آیکون ها میمونن ... ان شاء الله توی تاپیک دیگه ادامه رو میزارم لطفا نظراتتون رو بگید راجبهیچ وقت به حذف محتوا رو نیار ... بهتره سعی کنی برای کاربرا مثال عملی بیاری که بعد از خوندن آموزش بشینن خودشون تست کنن و خودشونو درگیر کنن ... با تشکر ![]() ![]() ![]() !Whatever you DISRESPECT, you'll never have the ability to ACCESS
|
||||||||
جمعه 03 مرداد 1393 - 10:59 |
|
![]() |
سپاس هاThanks (1) : majid - |