Good practice to write CSS Media Queries

Question

I am fairly new to CSS Media queries. I am actually trying to adjust left margin for a button ('Add+' button as shown in the attached image) for different screen widths. I am trying to do this: @media only screen and (min-width: 200px) and (max-width: 350px) { .button_orange_extended { margin-left:0px; } } /*Media query for one specific screen width*/ @media only screen and (min-width: 360px) and (max-width: 400px) { .button_orange_extended { margin-left:30px; } } /*Another Media query for specific screen width*/ @media only screen and (min-width: 400px) and (max-width: 450px) { .button_orange_extended { margin-left:80px; } } By this means, i got to write this code around 10-12 times and adjust margin accordingly. Considering that i need to adjust margins not only for mobiles but for other devices like tablets. So, is there an short alternative approach? (Below is the image). JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

Instead of using px, you can use em. ems are relative to the current font size, whereas px is an absolute unit of measurement. So if you used em on all your elements, you could just change the body's font-size. This way, you won't have to set the size of every element per every different screen width, you'll only have to change the font size. I've used http://pxtoem.com/ for converting from px to em, I'd recommend it for beginners. Also, a very good post describing why you should use em instead of px: Why em instead of px?