I have been doing some research on media queries and I still don\'t quite understand how to target devices of certain sizes.
I want to be able to target desktop, ta
The general wisdom is not to target specific devices or sizes, but to reframe the term 'breakpoint':
You can use responsivepx.com to find the 'natural' breakpoints, as in 'breakpoints are dead' by Marc Drummond.
The 'breakpoints' then become the actual point at which your mobile design begins to 'break' i.e. cease to be usable or visually pleasing. Once you have a good working mobile site, without media queries, you can stop being concerned about specific sizes and simply add media queries that handle successively larger viewports.
If you're not trying to pin design to exact screen size, this approach works by removing the need to target specific devices. The integrity of the design itself at each breakpoint ensures that it will hold up at any size. In other words, if a menu/content section/whatever stops being usable at a certain size, design a breakpoint for that size, not for a specific device size.
See Lyza Gardner's post on behavioral breakpoints, and also Zeldman's post about Ethan Marcotte and how responsive web design evolved from the initial idea.
Further, the simpler and more semantic the DOM structure with nav
, header
, main
, section
, footer
etc. (avoiding abominations like div class="header"
with nested inner div
tags) the easier it will be to engineer responsiveness, especially avoiding floats by using CSS Grid Layout (Sarah Drasner's grid generator is a great tool for this) and flexbox for arranging and re-ordering according to your RWD design plan.