اختلاف تصویر در طراحی با لب تاپ 15 اینچ و مانیتور 29

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

1 پسندیده

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

  1. پیکسل (px): واحد px یک واحد ثابت است و اندازه دقیقی را برای فونت‌ها یا المنت‌ها مشخص می‌کند. این اندازه در همه اندازه‌های صفحه‌نمایش یکسان است. معمولاً برای اندازه‌های ثابت مانند عناوین استفاده می‌شود.
  2. واحد درصد (%): واحد درصد به اندازه نسبی اشاره دارد. به عبارت دیگر، نسبت به اندازه یک المنت مشخص می‌شود. مثلاً اگر یک المنت درصد 50% از عرض والد خود را داشته باشد، آن المنت نصف عرض والد را خواهد داشت.
  3. واحد em: ام (em) معمولاً برای تنظیم اندازه فونت به صورت نسبی به کار می‌رود. یک em برابر با اندازه فونت پایه (معمولاً در نقطه 12px) است. اگر برای مثال اندازه فونت 2em باشد، فونت دو برابر فونت پایه خواهد بود.
  4. واحد vh و vw: این واحدها نسبت به اندازه‌های صفحه‌نمایش تعیین می‌شوند. VH به معنای اندازه ارتفاع صفحه (Viewport Height) و VW به معنای اندازه عرض صفحه (Viewport Width) است. اگر برای مثال 50vh برای ارتفاع یک المنت تعیین کنید، این المنت نیمی از ارتفاع صفحه‌نمایش را اشغال خواهد کرد.
  5. واحد rem: Rem نیز برای تعیین اندازه فونت به صورت نسبی به کار می‌رود، مانند em. با این تفاوت که در اینجا اندازه‌های فونت بر اساس فونت پایه صفحه‌نمایش تعیین می‌شود.

استفاده از هر واحد بستگی به موقعیت و طراحی مورد نظر دارد. برای طراحی واکنش‌گرا که باید با تغییرات در اندازه صفحه مواجه شود، واحدهای درصد و vh/vw معمولاً مناسب‌تر هستند. به عنوان مثال، استفاده از vh برای تنظیم ارتفاع المنت‌ها معمولاً در طراحی واکنش‌گرا مفید است. همچنین، استفاده از em یا rem برای تنظیم اندازه فونت‌ها در وبسایت می‌تواند تنظیمات نسبی و منعطف‌تری فراهم کند.
طراحی المنتور به صورت فلکس باکس هست. سعی کنید از گزینه های چیدمان افقی و عمودی استفاده کنید.
بستگی به طرحتون داره البته. نمیشه خیلی کلی یک نسخه پیچید برای همه مدل ها.
اگر لینکی از طرحتون دارین بفرستید تا بیشتر بتونم کمکتون کنم.

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

1 پسندیده