مهدی مهدوی
5 ماه پیش توسط مهدی مهدوی مطرح شد
10 پاسخ

ریسپانسیو کردن قالب

باسلام و احترام
لطفا دوستانی که بدون استفاده از فریم ورک های css مانند bootstrap , tailwind , material قالب هاشون رو میزنن یا تا به حال زدن به این سوال من پاسخ بدن.

دوستان من Risponsive کردن رو خیلی خوب انجام میدم و هیچ مشکلی در Responsive کردم یک قالب ندارم.
responsive رو به صورت Movile First میزنم.

ولی اینقدر این سوال ذهن من رو درگیر خودش کرده که حد و حساب نداره؟!

سایت های مشهور رو در نظر بگیرید به خصوص سایت هایی که از طریق TV واردشون میشید
مثل
Filimo
Aparat
یا سایت هایی که کاربرانی دارن با مانیتور های خیلی بزرگ مثل سایت های عرض دیجیتال و ...

معمولا این سایت ها از یک موبایل 320 تا یک TV 50 اینچی کاربر دارن.

اما سوال :
شما با یک مرورگر مثل کروم یا Brave برید وارد سایت filimo بشید درسته ؟ (با فایر فاکس نرید)
inspect بگیرید و وارد سایت filimo بشید.
قسمت بالایی Responsive Custom رو روی 5000 * 2500 قرار بدید
صفه رو رفرش کنید تا روی اون ابعاد لود بشه

متوجه میشید از max-with : 1800 استفاده کردن
و خیلی المنت ها و نوشته ها ریز میشه
ولی روی TV 50 inch اگر این سایت رو بالا بیاری کاملا اوکیه
حتی روی صفحه سینما!؟!!؟!؟

و من بخاطر اینکه سایتی که طراحی میکنم روی ابعد خیلی بزرگ جواب بده از حالت portrait و landscape در media query استفاده میکنم و از vh و vw استفاده میکنم تا حتی روی ابعاد 9999 * 5000 هم پاسخگو باشه

داستان چیه اگر از max-with برای سایت هایی مثل آپارات و دیجی کالا و فیلیمو و ... دارن استفاده میکنن اونم max-with : 1800 px پس علتش چیه که روی مانیتور های 60 اینچی هم به درسته نمایش داده میشه اونا پیکسلشون از 1800 خیلی بالاتره

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

لطفا اگر کسی واقعا کاربلده یک بار برای همیشه توضیح بده داستان چیه چیکار میکنن
تشکر
@salar.mohammad2013
@saghari
@ossvahid
@Raymond
@shift.delete
@Farzadameri
@javadkarimii
@mahdi.nazari
@mehdi8686h
@hosseinradvictor


ثبت پرسش جدید
محمد رضا
تخصص : Full Stack Developer
@salar.mohammad2013 5 ماه پیش مطرح شد
1

سلام دوست عزیز
خیلی مهم هست که شما بدونی اندازه ی صفحه ی نمایش ربطی به پیکسل اون نداره مهم تعداد پیکسله ن سایزش
شما میتونی یه تلوزیون شش متری داشته باشی ولی وضوح تصویر همون 1920 در 1080 باشه
احتمالا تلوزیون شما full hd هست
وقتی میگی توی 2500 نوشته ها ریز میشه دلیلش اینه که پیکسل ها رو خیلی ریز میاد حساب میکنه درصورتی که مانیتور شما اون تعداد پیکسل نداره اصلا ( مثل این میمونه ک زوم مرورگر کم تر کنی ببری رو 65 درصد - تقریبا از نظر دید یه چیز در میاد کاری که کردی)
از نظر بنده اون سایت برای فول اچدی طراحی شده


مهدی مهدوی
@mehdimctb 5 ماه پیش آپدیت شد
0

@salar.mohammad2013
اگر هر px روی مانیوتور های مختلف متفاوت باشه پس میشه که برای container از max-vidth استفاده کرد و برای همه سایت ها از max-vidth : 1800 استفاده کنیم .
یعنی اوکی میشه ؟
و در مانیتور های مختلف اوکی هست ؟


محمد رضا
تخصص : Full Stack Developer
@salar.mohammad2013 5 ماه پیش مطرح شد
0

دوست عزیز
به اندازه ی مانیتور نیست به همون پیکسله
شما مانیتور سیستم خودت الان ببین رزولوشنش چنده
برای من 23 اینچ هست و full hd
 تصویر
شما میتونی یه لبتاپ و تبلت کوچیک 15 اینچی داشته باشی full hd باشه
الان 70 درصد صفحه نمایش ها full hd هست اما شما باید برای سایز تبلت و لبتاپ ها که حدودا فکر میکنم 1366 در 768 طولشون هست هم مد نظر قرار بدی کارت رو اکثر لبتاپ ها این رنجشونه
برای سایز بزرگ تر از full hd من خودم تاحالا رسپانسیو نکردم چون خیلی درصد کمی هستند ولی کوچیک تر تا سایز موبایل رسپانسیو باید بشه


oss_vahid
تخصص : wordpress developer
@ossvahid 5 ماه پیش مطرح شد
0

سلام ارادت
بنده تاحالا از
bootstrap , tailwind , material
استفاده نکردم فقط چندباری بوت استرپ تستی زدم خب اول بگم شما قرار نیست برا همه دستگاه ها با هر سایزی صفحه رو کاملا واکنشگرا کنی
به شخصه فقط برای گوشی/ تبلت و مانیتور متوسط واکنشگرا میکنم برا بقیه دستگاه ها بزرگتر از مانیتور متوسط مثل مانیتور بزرگ و تلویزیون و...
شما بیا به تگ body ی media query بده و بگو آقا مثلا به سایز 1500 رسیدی بیا و فلان شو اینطوری صفحه از سایز 1500 به بعد واسه تمام دستگاه ها ست میشه ی مثال

@media(min-width :1500px){
body{
width : 1500px;
margin : 0px auto;
} 
}

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


مهدی مهدوی
@mehdimctb 5 ماه پیش مطرح شد
0

@ossvahid
با سلام من responsive کردن رو خیلی تمرین کردم و هر قالبی رو تقرایبا هر شکلی که بخوام ریسپانسیو میکنم و حتی برای صفحات lanscape و portrait خیلی تمرین کردم

ولی سوال اصلی من این هست دیجی کالا برای چه ابعادی responsive میکنه ؟
تا چه پیکسلی معمولا ؟
اگر مثلا من برای container از max-with : 1800 px استفاده کنم توی مانیتور های بزرگ اوکی میشه ؟


oss_vahid
تخصص : wordpress developer
@ossvahid 5 ماه پیش مطرح شد
0

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

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

معمولا صفحه نمایش مانیتور از 1280 شروع میشه تا... پس ما صفحه نمایش رو تا مثلا 1500 یا 1800 رسپانسیو میکنیم بعدش از تکنیکی که بهت گفتم استفاده می‌کنیم

در خصوص نمایش هم نگران نباش وقتی میگی 1800 پیکسل یعنی کاربری که مثلا داخل ی مانیتور 2800 پیکسلی داره صفحه رو میبینه داره ی صفحه با بخش 1800 پیکسلی رو میبینه


محمد حسین
تخصص : mevn stack
@saghari 5 ماه پیش مطرح شد
1

تیلویند رو حتما امتحان کن هم تو بحث ریسپانسیو هم توی بقیا کارت نصف میشه مثل بوت استرپ نیست که استایل آماده باشه خودت استایلای css رو توی کلاسای html میدی مثلا برای ریسپانسیو میدی

<div class="sm:w-10 md:w-16 lg:w-20 xl:w-24 2xl:w-28"></div>

رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 5 ماه پیش مطرح شد
0

@saghari
البته نیازی نیست از استایل بوت استرپ استفاده می کنید.
می توانید تنها از گرید بوت استرپ برای رسپانسیو سازی قالب به کار بگیری ...


سیدعلی موسوی
تخصص : سی شارپ و پی اچ پی
@juza66 5 ماه پیش آپدیت شد
0

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

باز میگم حدس میزنم چون در چندسایت مختلف این عملکرد رو دیدم.


محمد حسین
تخصص : mevn stack
@saghari 5 ماه پیش مطرح شد
0

@Raymond
فکر کنم اشتباه شده این کدی که دادم تیلوینده چون من بوت استرپ بلد نیستم
منظورم تفاوت معماری تیلویند و بوت استرپ و قابل مقایسه نبودنشون بود


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

ورود یا ثبت‌نام