RESPONSIVE WEB DESIGN TIPS

How can I use media queries in my website?

Old fashion way, just link to your css file :  

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="mobile.css" /> 

OR import the css file in your css file! 

@import url("mobile.css") screen and (max-device-width: 480px); 

 And if you want more option, use @media rule : 

@media screen and (max-device-width: 480px) { 
  .column { float: none; }
} 

How Cover media queries in IE 6-8?

After we defined all our media queries from mobile upto desktop screens in our css file(S), then we need to link to respond.js exactlly after our css file(s). Basicly respond.js enable CSS3 media queries in browsers that don't support them.

How handle it in javascript

CSS Media queries are fun, but sometimes you need to handle your responsive website from javascript. Enquire.js give you all u need, it can triggered when a media query is match or even when a media query leave a match area to an "unmatch" area, and much more methods which you can cover all possibilities! Good news is, this tool have no dependencies and it's lightweight ( 1kb ) 

Need More?

Take a look at Res.js documentation, Res.js doesn't just define breakpoints in Javascript, it also provides easy access to OS and Browser type, detects whether a device is in Portrait or Landscape and uses Mouse or Touch input. Lets say you want target only "Tablets" which have "android" OS with landscape orientation, it's easy with res.js :  

if( r.os === 'android' && r.device === 'tablet' && r.orient === 'landscape' ){ 

// do something here for android tablets in landscape mode

}  

By Emad Dehnavi

Source : http://blog.emaddehnavi.ir/index.php/2017/09/28/responsive-web-design-tips/