CSS

/* التنسيق الإفتراضي */
.button {
  display: none;
}

/* سيعمل هذا التنسيق عندما تكون الشاشة اقل من 701 بكسل */
@media (max-width: 700px ) {
  .button {
    display: block;
  }
}

/* سيعمل هذا التنسيق ابتدائا من حجم الشاشة 900 */
@media (min-width: 900px) {
  .button {
    display: block;
  }
}

jQuery

$(window).on('resize', function() {
  if ($(this).width() > 700) {
  $('.button').hide();
} else {
    $('.button').show();
  }
});

مكتبة جاهزة jQuery

تعمل حسب نوع الجهاز . ممكن تفيدك !..

والمثال الـ CSS أكثر من رائع

اعتقد انك تحتاج الى بحث خفيف عن:

responsive design standard dimensions

الذي سيغنيك عن كتابة والبرمجه لجميع الهواتف المختلفه

تفحص هذا الملف: