ishia developer

زمانی که طراحی واکنش گرا مطرح می شود معمولا ذهن ها به سمت موبایل و تبلت می رود و کمتر توجهی به مانیتورهایی با سایز خیلی بزرگ و رزولوشن بالا می شود. اگر با یک مانیتور با رزولوشن خیلی بالا شروع به مرور وب سایت ها در دنیای اینترنت کنید قطعا به مشکلات زیر بر می خورید:

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

1024*768 تنها رزولوشن برای دسکتاپ نیستند بلکه رزولوشن های متفاوتی از 600*800 تا 1440*2560 هم وجود دارند که البته در حال بزرگ تر شدن هم می باشند. همانطور که در مثال زیر مشاهده می کنید تصویر برای رزولوشن های بالا هم در نظر گرفته شده است:

  <img  src="image_medium.jpg"      srcset="image_small.jpg 400w,             image_small@1.5x.jpg 600w,             image_medium.jpg 800w,             image_xlarge.jpg 1040w,             image_large@1.5x.jpg 1386w,             image_medium@2x.jpg 1600w,             image_large@2x.jpg 1848w,             image_xlarge@2x.jpg 2080w" />  

اندازه فونت

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

  @media (min-width: 1600px) {  body {    font-size: 18px;  }}  

عرض خطوط

تعداد کاراکتر استاندارد در یک خط بین 65 تا 75 می باشد. اگر اندازه فونت پایه 16 پیکسل باشد عرض ستون برای یک نوشته اگر بیشتر از 600 پیکسل باشد معمولا خوانایی را پایین می آورد. پس باتوجه به سیستم صفحه آرایی که استفاده می کنید باید این عرض در رزولوشن های متفاوت کنترل شود تا خواندن متن برای کاربر آسان باشد و کاربر را به ادامه کار تشویق کند.

  @media (min-width: 768px) {  .text-body {    width: 600px;  }}