::: در حال بارگیری لطفا صبر کنید :::Loading , please wait ...

انجمن کدستانMoisrex

MoisrexMoisrex.rozblog.com
زمان جاریtime : شنبه 16 تیر 1403 - 6:57 بعد از ظهر
نام کاربریusername : پسوردpassword : یاor عضویتregister | رمز عبور را فراموش کردمForgot your password?
شما در سایت ما ثبت نام نکرده اید و یا وارد اکانت کاربری خود نشده اید. از شما خواهشمند هستیم You are not log in to site. Please وارد شویدlogin یاor ثبت نام کنیدregister .
شروع طراحی رسپانسیو با سی اس اس 3
تعداد بازدیدvisits : 909
majid آفلاین



ارسال هاAnswers : 925
عضویتRegistration date : 16 /5 /1391
تعداد اخطارWirnings : -1
حمایت کردهThanks : 161
حمایت شدهThanked : 191
شروع طراحی رسپانسیو با سی اس اس 3

سلام

امروز قسمت اول رو شروع میکنم:

ابتدا برای تعیین عرض بلوک ها از % به جای px لستفاده کنید

این کار دومزیت دارد

1.در تمام مرورگرها به اندازه مورد نظر نمایش داده می شود(بعضی قالب ها توی اپرا و کروم کمی اختلاف عرض دارند)

2.در تمام نمایشگرهای بزرگتر از 1025 قالب شما به همان اندازه در میاید

نمونه:

کد:

.center{width:100%}.right{width:20%}.center{width:60%}.left{width:20%}

ولی برای اینکه قالب درنمایشگرهای کوچکتر از 950 یا 450 px واکنش گرا باشد باید از کدهای مدیا اسکرین استفاده نمایید

که در همین تاپیک در ادامه آموزش خواهم گذاشت (درصورت روحیه دادن کاربران)

توجه:

حال ندین حال نمیدم مجبورم نیستم حال بدم نظراتتونو بگید



بعضیا قدرت خدا با صفحه کلید و موس به دنیا میان و خدا دادی اوستان :دی



چهارشنبه 01 مرداد 1393 - 21:45
وب کاربرUser's blog ارسال پیامsend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
حمایت شده حمایت شدهThanks : سپاس هاThanks (3) : mahan12 - takbook2013 - ehsan123 -
admin آفلاین


مدیریت

ارسال‌هاAsnwers : 7209
عضویتRegistration date : 18 /10 /1390
حمایت کردهthanks : 4361
حمایت شدهThanked : 3281
پاسخAnswer 1 : شروع طراحی رسپانسیو با سی اس اس 3

آقا حال دادن چیه :دی

تو مملکت اسلامی میخوای حال کنی؟ :دی

درصد توی واکنشگرا زیاد باحال نمیشه ...

توی مانیتور های بزرگ هیکلی میشه :دی

از media بهتره استفاده کردن ...

با تشکر


!Whatever you DISRESPECT, you'll never have the ability to ACCESS
چهارشنبه 01 مرداد 1393 - 22:02
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
takbook2013 آفلاین



ارسال‌هاAsnwers : 22
عضویتRegistration date : 17 /6 /1392
حمایت کردهthanks : 12
حمایت شدهThanked : 3
پاسخAnswer 3 : شروع طراحی رسپانسیو با سی اس اس 3

داداش مجید دمت گرم ادامه بده

چهارشنبه 01 مرداد 1393 - 22:18
ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
majid آفلاین



ارسال‌هاAsnwers : 925
عضویتRegistration date : 16 /5 /1391
تعداد اخطارWarnings : -1
حمایت کردهthanks : 161
حمایت شدهThanked : 191
پاسخAnswer 4 : شروع طراحی رسپانسیو با سی اس اس 3

نقل قول از moisrex

آقا حال دادن چیه :دی

تو مملکت اسلامی میخوای حال کنی؟ :دی

درصد توی واکنشگرا زیاد باحال نمیشه ...

توی مانیتور های بزرگ هیکلی میشه :دی

از media بهتره استفاده کردن ...

با تشکر

منم نوشتم میشه ازمدیا استفاده کرد

من که توی مانیتور بزرگ استفاده کردم بهتر نشون داد کل عرض قالب اندازش شد

حال داریم تا حال عزیزم مگه عرفای بزرگ حال نمیکردن؟

وقتی میبینی یکی یه پست راجب عکسش میزاره 5 صفحه پاسخ و اسپم زدن

میای یه پست مفید بزاری 5 نظرو اسپم باشه ضدحاله

اگه بعضی سو استفاده گرا نباشن سه چهارتا کد از سایته دیگه چاشنیه قالب میکنن میدن دست مشتری و برای طراحی قالب قیمت

گزاف میگیرن بیان واکنش گراروهم تمیز یادبگیرن قیمتاشون بیشتر میشه (البته کسی که کدنویسه فرق داره قضیش)

حالا بگذریم ادامشو بعد میزارم امیدوارم این آموزش باعث سو استفاده بعضی ها نشه محمد جان

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

خودتو میفهمی و اطلاعات خودتم بیشتر میشه)



بعضیا قدرت خدا با صفحه کلید و موس به دنیا میان و خدا دادی اوستان :دی



پنجشنبه 02 مرداد 1393 - 07:43
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
majid آفلاین



ارسال‌هاAsnwers : 925
عضویتRegistration date : 16 /5 /1391
تعداد اخطارWarnings : -1
حمایت کردهthanks : 161
حمایت شدهThanked : 191
پاسخAnswer 5 : شروع طراحی رسپانسیو با سی اس اس 3

نقل قول از takbook2013

داداش مجید دمت گرم ادامه بده

چشم بعدا قسمتا دیگه رو میزارم



بعضیا قدرت خدا با صفحه کلید و موس به دنیا میان و خدا دادی اوستان :دی



پنجشنبه 02 مرداد 1393 - 07:45
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
admin آفلاین


مدیریت

ارسال‌هاAsnwers : 7209
عضویتRegistration date : 18 /10 /1390
حمایت کردهthanks : 4361
حمایت شدهThanked : 3281
پاسخAnswer 6 : شروع طراحی رسپانسیو با سی اس اس 3

نقل قول از majid

نقل قول از moisrex

آقا حال دادن چیه :دی

تو مملکت اسلامی میخوای حال کنی؟ :دی

درصد توی واکنشگرا زیاد باحال نمیشه ...

توی مانیتور های بزرگ هیکلی میشه :دی

از media بهتره استفاده کردن ...

با تشکر

منم نوشتم میشه ازمدیا استفاده کرد

من که توی مانیتور بزرگ استفاده کردم بهتر نشون داد کل عرض قالب اندازش شد

حال داریم تا حال عزیزم مگه عرفای بزرگ حال نمیکردن؟

وقتی میبینی یکی یه پست راجب عکسش میزاره 5 صفحه پاسخ و اسپم زدن

میای یه پست مفید بزاری 5 نظرو اسپم باشه ضدحاله

اگه بعضی سو استفاده گرا نباشن سه چهارتا کد از سایته دیگه چاشنیه قالب میکنن میدن دست مشتری و برای طراحی قالب قیمت

گزاف میگیرن بیان واکنش گراروهم تمیز یادبگیرن قیمتاشون بیشتر میشه (البته کسی که کدنویسه فرق داره قضیش)

حالا بگذریم ادامشو بعد میزارم امیدوارم این آموزش باعث سو استفاده بعضی ها نشه محمد جان

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

خودتو میفهمی و اطلاعات خودتم بیشتر میشه)

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

مثلا همین لینک باکس منو اگر با نمایشگر بزرگ ببینیدش یکم بزرگه با وجود این که با مدیا کوچیک ترش کردم. (توی فایرفاکس کنترل شیفت 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
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
حمایت شده حمایت شده: سپاس هاThanks (1) : majid -
amirmohsen آفلاین




ارسال‌هاAsnwers : 3175
عضویتRegistration date : 20 /11 /1391
حمایت کردهthanks : 610
حمایت شدهThanked : 1228
پاسخAnswer 7 : شروع طراحی رسپانسیو با سی اس اس 3

عجب! ممد دستات آتیش نگرفت؟؟؟

:)
پنجشنبه 02 مرداد 1393 - 12:11
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
majid آفلاین



ارسال‌هاAsnwers : 925
عضویتRegistration date : 16 /5 /1391
تعداد اخطارWarnings : -1
حمایت کردهthanks : 161
حمایت شدهThanked : 191
پاسخAnswer 8 : شروع طراحی رسپانسیو با سی اس اس 3

نقل قول از moisrex

نقل قول از majid

نقل قول از moisrex

آقا حال دادن چیه :دی

تو مملکت اسلامی میخوای حال کنی؟ :دی

درصد توی واکنشگرا زیاد باحال نمیشه ...

توی مانیتور های بزرگ هیکلی میشه :دی

از media بهتره استفاده کردن ...

با تشکر

منم نوشتم میشه ازمدیا استفاده کرد

من که توی مانیتور بزرگ استفاده کردم بهتر نشون داد کل عرض قالب اندازش شد

حال داریم تا حال عزیزم مگه عرفای بزرگ حال نمیکردن؟

وقتی میبینی یکی یه پست راجب عکسش میزاره 5 صفحه پاسخ و اسپم زدن

میای یه پست مفید بزاری 5 نظرو اسپم باشه ضدحاله

اگه بعضی سو استفاده گرا نباشن سه چهارتا کد از سایته دیگه چاشنیه قالب میکنن میدن دست مشتری و برای طراحی قالب قیمت

گزاف میگیرن بیان واکنش گراروهم تمیز یادبگیرن قیمتاشون بیشتر میشه (البته کسی که کدنویسه فرق داره قضیش)

حالا بگذریم ادامشو بعد میزارم امیدوارم این آموزش باعث سو استفاده بعضی ها نشه محمد جان

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

خودتو میفهمی و اطلاعات خودتم بیشتر میشه)

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

مثلا همین لینک باکس منو اگر با نمایشگر بزرگ ببینیدش یکم بزرگه با وجود این که با مدیا کوچیک ترش کردم. (توی فایرفاکس کنترل شیفت m رو بزنید.)

ولی این دو تا اصل ماجرا نیستن ...

ترفند های دیگه ای هم هستن.

مثل استفاده از درصد به جای پیکسل در فونت ها

یا استفاده از overflow کنار float برای وقتی که مثلا میخوای یه متنو کنار یه تصویر بذاری

یا مثلا استفاده از background-size برای پس زمینه ها (که پیشنهاد نمیشه)

یا ...

حتی توی جاوا اسکریپت هم میشه کدهای media رو شبیه سازی کرد.

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

اما اگر این همه کد رو استفاده کنین تا وقتی که متا تگ viewport رو استفاده نکنین انگار تقریبا هیچ کاری نکردین ...

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

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

یکی از بد ترین قسمت هایی که من خیلی بدم میاد توی ریسپانسیو ، ریسپانسیو کردن منوی navigation هست که لینک ها توشه.

بعضیا میان با جاوا اسکریپت اون لینک ها رو به صورت یه دکمه در میارن که بعدش باز میشه.

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

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

بعضی ها هم از display:inline-block

من جدیدا خیلی میبینم که مثلا بعضی ها از inline-block و خاصیت box-sizing و اینجور چیزا خیلی استفاده می کنن.

فقط باید بهشون بگم بهتره از این ها استفاده نکنین سی اس اس خودش برای دور زدن اینا کد داره فقط یکم سخته به دست آوردن اعداد دقیقش و یکمی اعدادش رند نمیشن مخصوصا وقتی با padding و margin کار می کنی ...

توی یه مرورگری که سی اس اس سه پشتیبانی نمیشه قالب چنین کسایی میشه طویله ...

متاسفانه اینترنت اکسپلورر های ورژن پایین و فایرفاکسی مثل فایرفاکس 3.6 و اینجور مرورگر های قدیمی که که مشکلاتی دارن توی کافی نت ها زیاده ...

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

با تشکر

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

مگه اندازه کوچک تر از 450 هم داریم؟ واسه تلفن های حالا خوبه یه بچه 7 ساله تو خیابون تبلت دستشه مثل پسرخاله من 12 سالشه تبلت داره

یکی از بد ترین قسمت هایی که من خیلی بدم میاد توی ریسپانسیو ، ریسپانسیو کردن منوی navigation هست که لینک ها توشه.

میشه مخفیش کرد با مدیا اکثر قسمت های غیر ضروری رو میشه مخفی کرد مثل اسلایدر و... خوب طرف باگوشی میاد اینارو میخاد چکار؟

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

سعی میکنم جاهایی رو سی اس اس 3 کنم که پشتیبانیش تویه مرورگرهایی که پشتیبانیش نمیکن مشکل پیش نیاد

من بیشتر برا رسپانسیو سی اس اس 3 استفاده میکنم تویه مرورگر گوشی هم تست کردم خوب بود خوب پشتیبانی نکنه رسپانسیو پر

اکثر کاربرا هم با مرورگرهای کروم میان یا فایر فاکس اونایی که اکسپوور دارن کار بانت بلد نیستن (این کاربرها هم کم نیستن) نیم ساعت طول میکشه بالا بیاره صفحه رو

ولی من متا تگ viewport گذاشتم

ممنون برا توضیح کامل

ان شاء الله توی تاپیک دیگه ادامه رو میزارم لطفا نظراتتون رو بگید راجب اموزش (نه ممنون و ادامه بدید و اینا بیشتر مشکلات رو بگید تا اموزش بهتر و کاملی بشه )



بعضیا قدرت خدا با صفحه کلید و موس به دنیا میان و خدا دادی اوستان :دی



پنجشنبه 02 مرداد 1393 - 23:25
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
amireza1 آفلاین



ارسال‌هاAsnwers : 384
عضویتRegistration date : 23 /10 /1392
حمایت کردهthanks : 250
حمایت شدهThanked : 391
پاسخAnswer 9 : شروع طراحی رسپانسیو با سی اس اس 3

محمد این همه کلمه رو از کجا میاری؟:دی به من هم یاد بده

مثلا میخوام یه پست ارسال کنم هیچ توضیحی نمینویسم :دی

پنجشنبه 02 مرداد 1393 - 23:37
ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
amireza1 آفلاین



ارسال‌هاAsnwers : 384
عضویتRegistration date : 23 /10 /1392
حمایت کردهthanks : 250
حمایت شدهThanked : 391
پاسخAnswer 10 : شروع طراحی رسپانسیو با سی اس اس 3

ممنون از استارتر تایپک....

پنجشنبه 02 مرداد 1393 - 23:38
ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
admin آفلاین


مدیریت

ارسال‌هاAsnwers : 7209
عضویتRegistration date : 18 /10 /1390
حمایت کردهthanks : 4361
حمایت شدهThanked : 3281
پاسخAnswer 11 : شروع طراحی رسپانسیو با سی اس اس 3

مگه اندازه کوچک تر از 450 هم داریم؟ واسه تلفن های حالا خوبه یه بچه 7

ساله تو خیابون تبلت دستشه مثل پسرخاله من 12 سالشه تبلت داره

ریسپانسیو بعضی مواقع فقط برای تلفن ها نیست.

مثلا مثل لینک باکس کدستان ...

توی بعضی از سایت ها بری یه اندازه 100 در 200 گذاشتن که اگر اون ریسپانسیو نبود اونجوری داغون میشد ...

میشه مخفیش کرد با مدیا اکثر قسمت های غیر ضروری رو میشه مخفی کرد مثل اسلایدر و... خوب طرف باگوشی میاد اینارو میخاد چکار؟

مگه حالت بده مخفی کنی؟ اونا لینک های دسترسی به بقیه وب هستن اون وقت یکی خواست با موبایل بره بقیه وبو ببینه چه بوووقی باید بخوره؟ :دی

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

مثل همون لینک باکس که آیکون داره متن هم داره وقتی اندازه ها خیلی کوچیک میشه متن ها حذف میشن فقط آیکون ها میمونن ...

ان شاء الله توی تاپیک دیگه ادامه رو میزارم لطفا نظراتتون رو بگید راجب

اموزش (نه ممنون و ادامه بدید و اینا بیشتر مشکلات رو بگید تا اموزش بهتر و

کاملی بشه )

هیچ وقت به حذف محتوا رو نیار ...

بهتره سعی کنی برای کاربرا مثال عملی بیاری که بعد از خوندن آموزش بشینن خودشون تست کنن و خودشونو درگیر کنن ...

با تشکر


!Whatever you DISRESPECT, you'll never have the ability to ACCESS
جمعه 03 مرداد 1393 - 10:59
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
حمایت شده حمایت شده: سپاس هاThanks (1) : majid -



moisrex
درباره ماAbout us لینک های ماOur links کلمات کلیدیKeywords
انجمن تخصصی کدستان ، ساخته شده توسط فردی با نام مستعار Moisrex می باشد.This forum designed by a person who called Moisrex.

ایمیلE-mail : Moisrex @ Gmail.com
کدستان,انجمن کدستان,کدنویسی,انجمن پشتیبانی,فروم,رزبلاگ,آموزش کدنویسی,درخواست کد
تمامی حقوق این انجمن مربوط به همین انجمن می باشد | طراحی قالبCopyright (c) By Moisrex , All rights reserved | Desiger : Moisrex