css3 - Good practice to write CSS Media Queries -

i new css media queries. trying adjust left margin button ('add+' button shown in attached image) different screen widths. trying this:

 @media screen  , (min-width: 200px) , (max-width: 350px)     {         .button_orange_extended         {             margin-left:0px;         }     }   /*media query 1 specific screen width*/      @media screen  , (min-width: 360px) , (max-width: 400px)     {         .button_orange_extended         {              margin-left:30px;         }     } /*another media query  specific screen width*/      @media screen  , (min-width: 400px) , (max-width: 450px)     {         .button_orange_extended         {              margin-left:80px;         }     } 

by means, got write code around 10-12 times , adjust margin accordingly. considering need adjust margins not mobiles other devices tablets. so, there short alternative approach? (below image).

instead of using px, can use em. ems relative current font size, whereas px absolute unit of measurement. if used em on elements, change body's font-size. way, won't have set size of every element per every different screen width, you'll have change font size. i've used http://pxtoem.com/ converting px em, i'd recommend beginners. also, post describing why should use em instead of px: why em instead of px?