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

[سعید شعبانی 2047]

چگونه می شوند قالبی که هیچ یک از ویژگی های یک قالب واکنشگرا را ندارد تبدیل به یک قالب کاملا واکنش گرا کرد. از کجا باید شروع کرد؟

[oMid 2114]

بایستی با مفهوم css media queries در css آشنا باشید ولی اصلا پیشنهاد نمی کنم که این کار را انجام چون بسیار دشوار است در عوض از فریمورکهایی که آماده می باشند استفاده کنید...#

[سعید شعبانی 2047]

بایستی با مفهوم css media queries در css آشنا باشید ولی اصلا پیشنهاد نمی کنم که این کار را انجام چون بسیار دشوار است در عوض از فریمورکهایی که آماده می باشند استفاده کنید...#

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

[oMid 2114]

یه نمونه rootstheme که من خودم در این طرح از اون بهره گرفتم:

http://mpf90.ir/wordpress/

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

[سعید شعبانی 2047]

نمی تونید قالب فعلی رو تبدیل کنید

یعنی هیچ راهی نداره؟

[oMid 2114]

بایستی با مفهوم css media queries در css آشنا باشید ولی اصلا پیشنهاد نمی کنم که این کار را انجام چون بسیار دشوار است در عوض از فریمورکهایی که آماده می باشند استفاده کنید...#

[سعید شعبانی 2047]

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

ویرایش شده آذر 91 توسط dnojir

[oMid 2114]

بله...#

[سعید شعبانی 2047]

تمام کار یک قالب واکنش گرا بر عهده css media queries در css است؟

[Morteza 34190]

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

[سعید شعبانی 2047]

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

آقا مرتضی مشیه کمی توضیح بدید که چجوریاست؟ نمیشه توسط افزونه firebug این قابلیت رو استفاده کرد؟

[Morteza 34190]

افزونه فایرباگ کارش کاوش در کدهای سایت هست.

شما برای اینکه لیوت سایتتون براساس کاربر واکنش نشون بده باید کدهای استایل رو تغییر بدید. بهتره آموزش زیر رو مطالعه کنید برای شروع مناسب هست:

http://css-tricks.com/css-media-queries/

[AliZemani 349]

ببخشید ، .واکنش گرا یعنی چی؟

[oMid 2114]

ببخشید ، .واکنش گرا یعنی چی؟

http://en.wikipedia.org/wiki/Responsive_web_design

+

وب سایت های واکنش گرا

ویرایش شده آذر 91 توسط oMid

[alikhani98 517]

راه دیگر در طراحی واکنش گرا استفاده از Javascript به جای CSS است. این راه حل مخصوصا برای ابزارهایی که از CSS به درستی پشتیبانی نمی کنند، کاربرد خواهد داشت. معمولا به عنوان پشتیبان CSS نیز بکار می روند.

یک کتابخانه استاندارد از javascript وجود دارد که برای سازگار ساختن مرورگرهای قدیمی با CSS3 نوشته شده است. برای استفاده از این کتابخوانه به –css3-mediaqueries.js می توانید مراجعه کنید.

در زیر نمونه ای از کدهای جاوااسکریپت را مشاهده می کنید که بر ااس اندازه صفحه، استایل مورد نظر را باز می کند.

به نظر شما خوبه از جاوا اسکریپت استفاده کنیم؟

[Vahid 863]

خوب وقتی با css می تونیم با js چرا؟ عین پیچوندن لقمه و گذاشتن تو دهن میمونه

[aminvl 99]

این رو از یه وبلاگی پیدا کردم . تست کنید ببینید جواب میده؟

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

تو /* Styles */ ها باید استایل مخصوص خودتون رو وارد کنید و کل فایل رو تو یه فایل css در صفحه خودتون لود کنید

منبع : "وبلاگ احد نعمتی"