رفتن به مطلب

قالب در موبایل


AmirHosseinGT

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

سلام

من یه مشکلی دارم

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

چجوری میشه درستش کنم؟

آدر سایت Androvich.ir

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

یا باید همین قالبو فیکسش کنی یا میتونی از افزونه موبایل مثل wptouch استفاده کنی که خودش قالب مخصوص داره

لینک به ارسال

کار اختصاصیه؟

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

لینک به ارسال

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

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

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

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

اگر با این موارد نتونستی به نتیجه برسی برو به قسمت فایلهای قالبت

و فایل style.css رو باز کن و برو به انتهای صفحه

حالا این کد رو اضافه کن


/* Large desktop */
@media (min-width: 1200px) {

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {

}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

}

/* Landscape phones and down */
@media (max-width: 480px) {

}

اینها مقادیر ابعاد نمایشگرها هستش

داخل هر کدوم باید استایل عنصر مورد نظر رو قرار بدی

مثلا یه کادر 200 پیکسلی داری که باید بر حسب درصد اینجا وارد کنی مثلا width:35%; وفونت ا و ...ادامه کار به همین روال تا اینکه قالبتون واکنش گرا بشه

لینک به ارسال

میشه همین قالبو واکنشگرا کرد؟

بله میشه

با استفاده از کد بالا قالبتون رو تنظیم کنید

لینک به ارسال

من زیاد با فایل استایل آشنایی ندارم میشه یکم بیشتر راهنمایی کنید؟

لینک به ارسال

اگر زیاد به سی اس اس آشایی نداشته باشین نمی تونین اینطوری پروژه رو خودتون انجام بدین

ببینید در طراحی رسپانسیو شما باید تمامی عناصر رو بر اساس و ریاضیات کنار هم بچینین

باید بر حسب درصد مقدار فضا به یک عنصر بدین تا در فضای کوچیک تر و یا بزرگتر خودشو گم نکنه و سریع موقعیتشو حفظ کنه و به نسبت تغییر کنه

مثال :

یه کادر داریم با عرض تمام صفحه


#box {
width:100%;
}

حالا داخلش یک تصویر قرار میدیم که یک سومش کادر رو اشغال میکنه


#box img {
width:33%;
}

حالا کنارش یه متن میزاریم که دو سوم دیگه رو پر کنه


#box p {
width:66%;
}

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

حالا بعضی اوقات مثثلا متن یا المان های کنار هم به مشکل میخورن و جاشون اینور و اون ور میشه که باید توسط قطعه کد بالا که گذاشتم برای دستگاه های متفاوت تنظیم کنی تا درست اجرا بشن

برای تست هم مرورگر ها گزینه ای برای Developer Tools داره که میتونین گزینه Responsive رو انتخاب کنین و بینید قالبتون چطوری شده

لینک به ارسال

میشه فایل استایلمو بدم چون من با سی اس اس آشنا نیستم

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

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

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

لینک به ارسال

پس اگه درد سر داره فعلا با همین کار میکنم

ممنون

لطفا تو این تاپیک هم کمک کنید

لینک به ارسال

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

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

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

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

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

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

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

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

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