What is the best boilerplate for media queries?

Hello Murad,

If by boilerplate you are asking for a list of various settings that can be used to identify individual devices then i recommend visiting the most common manufacturers websites for such settings as they often change with new models and rarely do existing templates match the newest models

That being said

I would not recommend that you take a device oriented approach

Instead what i would suggest is that you look at your Website or Application from a user interface perspective

A user does not care if mobile has a slightly modified interface than that of a tablet, he only cares for the ease in which he can use a system and the manner by which the information is portraid

That being said i recommend you look at your website in regards to size media queries as4 levels in regards to width:

-479px or less (small display, mobile portrait)

-480px -969px (medium display, mobile portrait /  small landscapes and tablet portraits)

-970px -1399px (large display, tablet landscapes and non-HD desktops)

-1400px+ (HD displays)

These4 levels will help cover virtually every screen resolution, device and orientation

Additionally identifying iOS devices or Macs is relatively easy using -webkit-min-device-pixel-ratio which depends on the type of device you wish to target

As a final note, always use the following format when writing media queries:

@media only screen AND (min-width : WIDTHpx) AND (min-width : HEIGHTpx), only screen AND (min-height : OTHER-HEIGHTpx);

This is a highly simplified explanation but i hope it helps you somewhat decide what is the best approach for yourself and aid you in perfecting it