توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : رسپانسیو قالب سایت
hamidrez4
July 2nd, 2015, 19:04
سلام دوستان من یه قالب طراحی کردم و الان میخوام از کسانی که به رسپانسیو کردن قالب آشنایی دارن تقاضا کنم که به من آموزش بدن تا بتونم خودم رسپانسیو قالب رو انجام بدم...
من درباره یه سری کدها درباره این موضوع اطلاع کسب کردم مثل @media ...
ولی هر کاری میکنم رسپانسیو نمیشه!!!
mojtaba05
July 2nd, 2015, 20:22
سلام٬
گوگل و سایت‌های اینترنتی بهترین معلم برای شما خواهند بود. رایج‌ترین روش ریسپانسیو سازی استفاده از مدیا کوئری ها هستند٬ مثلا :
@media screen and (max-width: 980px){
استایل
}
خب حالا در حالی که سایت رو در موزیلا دارید می بینید٬ کنترل٬ شیفت و ام رو همزمان بزنید و ببینید در اندازه مثلا 980 پیکسل اگر عرض نمایشگر باشه٬ کدوم قسمتها مشکل دارند. استایل های جدید رو در محلی که در بالا مشخص کردم بنویسید.
دوست عزیز٬ این یک توضیح خیلی کلی بود٬ بهتره تلاش و جستجو کنی تا بتونی به فوت و فن ریسپانسیو سازی تسلط پیدا کنی.
hamidrez4
July 2nd, 2015, 23:57
سلام٬
گوگل و سایت‌های اینترنتی بهترین معلم برای شما خواهند بود. رایج‌ترین روش ریسپانسیو سازی استفاده از مدیا کوئری ها هستند٬ مثلا :
@media screen and (max-width: 980px){
استایل
}
خب حالا در حالی که سایت رو در موزیلا دارید می بینید٬ کنترل٬ شیفت و ام رو همزمان بزنید و ببینید در اندازه مثلا 980 پیکسل اگر عرض نمایشگر باشه٬ کدوم قسمتها مشکل دارند. استایل های جدید رو در محلی که در بالا مشخص کردم بنویسید.
دوست عزیز٬ این یک توضیح خیلی کلی بود٬ بهتره تلاش و جستجو کنی تا بتونی به فوت و فن ریسپانسیو سازی تسلط پیدا کنی.
بله من 2 روز دارم گوگل رو بالا و پایین میکنم و به این کدی که شما ذکر کردید رسیدم...اما بازم هر کاری میکنم...اگر اشتباه نکنم کد مدیا کوئری رو باید در یه فایل css جدا استایل بدم و بعد توی کد <head> فراخوانی کنم...
که منم این کار ها رو میکنم ولی تغییری مشاهده نمیکنم!!!
فقط کافیه کمی در ساختار کدها دقت کنید ، خودتون متوجه دستوراتی که باید بدید خواهید شد.
mojtaba05
July 3rd, 2015, 09:56
بله من 2 روز دارم گوگل رو بالا و پایین میکنم و به این کدی که شما ذکر کردید رسیدم...اما بازم هر کاری میکنم...اگر اشتباه نکنم کد مدیا کوئری رو باید در یه فایل css جدا استایل بدم و بعد توی کد <head> فراخوانی کنم...
که منم این کار ها رو میکنم ولی تغییری مشاهده نمیکنم!!!
حتما نیازی نیست در یک فایل جدا قرار بدید٬ میشه در همون فایل استایل فعلی قالب هم اضافه کرد. viewport رو باید به <head> قالب اضافه کنید.
partserver
July 3rd, 2015, 11:02
می تونید بدون اضافه کردن بخش @media فقط با استفاده از width و height بصورت درصدی قالب رو ریسپانسیو کنید که البته کمی دردسر داره ولی در نهایت خوب میشه. دقت کنید که در اکثر استایل ها {display:block;} و برای تصاویر {height:auto;} رو بکار ببرید.
اگر خواستید پیام بدید تا نمونه اش رو براتون آموزش بدم.
mgtco
July 3rd, 2015, 12:29
بهترین روش این که سایز ها رو روی 100% بزاری
mojtaba05
July 3rd, 2015, 13:09
می تونید بدون اضافه کردن بخش @media فقط با استفاده از width و height بصورت درصدی قالب رو ریسپانسیو کنید که البته کمی دردسر داره ولی در نهایت خوب میشه. دقت کنید که در اکثر استایل ها {display:block;} و برای تصاویر {height:auto;} رو بکار ببرید.
اگر خواستید پیام بدید تا نمونه اش رو براتون آموزش بدم.
کار ریسپانسیو سازی پیچیده تر این این روشی است که شما فرمودید٬ فرض کنید بدنه اصلی قالب 980 پیکسله٬ شما اگر از مدیا کوئری استفاده نکنید٬ ناچارید اندازه های خود قالب را به درصد تبدیل کنید٬ اولا با این کار زحمت خودتون رو بیشتر کردید. دوما ریسپانسیو سازی که فقط تنظیم طول و عرض عناصر نیست. مثلا یکی از مواردی که باید برای نمایش قالب در موبایل در نظر داشت٬ اینه که ما در موبایل موس و در نتیجه hover نداریم. با توجه به این که تقریبا در بیشتر قالب ها منوهایی وجود داره (مثلا دسته‌بندی‌ها) که زیر منوی اونها با اشاره موس ظاهر میشن. تکلیف این زیر منوها در موبایل چیه؟ ما باید ترتیبی اتخاذ کنیم که کاربر موبایل نسبت به کار کامپیوتر هیچ چیزی رو از دست نده. این فقط یک مثال بود٬ موارد خیلی بیشتری وجود داره.
بهترین روش این که سایز ها رو روی 100% بزاری
ممکنه بیشتر در مورد این روش توضیح بفرمایید؟
mgtco
July 3rd, 2015, 13:39
بهترین روش استفاده از % در سایز هستش نه سایز ثابت!
برای سایت یکی از دوستان تقریباً رسپانسیو هستش با این روش انجام دادیم و تست تو مانیتور های مختلف انجام دادیم
bvb09.ir/index.php
mojtaba05
July 3rd, 2015, 14:12
بهترین روش استفاده از % در سایز هستش نه سایز ثابت!
برای سایت یکی از دوستان تقریباً رسپانسیو هستش با این روش انجام دادیم و تست تو مانیتور های مختلف انجام دادیم
bvb09.ir/index.php
صفحه ای که آدرس دادید٬ ریسپانسیو نیست!
mgtco
July 3rd, 2015, 14:33
صفحه ای که آدرس دادید٬ ریسپانسیو نیست!
بخشی از این سایت توسط بنده رسپانسیو شده
حال خبرندارم چون مدام در حال تغییر بوده
اگر شک دارید یک صفحه بعنوان نمونه براتون بسازم :d
mojtaba05
July 3rd, 2015, 14:45
تنها چیزی که در اون صفحه به نظر میرسه روی واکنشگرایی اون کار شده٬ اسلایدشو است که اون هم فقط عرضش متانسب با صفحه تغییر می کنه و چون ارتفاعش ثابته٬ هر چه نمایشگر کابر کوچکتر باشه٬ تناسب ابعاد اون بیشتر به هم می خوره.:)