Media queries' widths How do you know which width to set for the different screen sizes when using media queries?

http://lmgtfy.com/?q=media+query+breakpoints

:) But no joke- learning to google things like this is a necessary skill in this craft.

Here's a pretty decent list of devices and the standard sizes for media queries. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Short answer: Let your content decide the widths.

"Don't define breakpoints based on device classes. Defining breakpoints based on specific devices, products, brand names, or operating systems that are in use today can result in a maintenance nightmare. Instead, the content itself should determine how the layout adjusts to its container." https://developers.google.com/web/fundamentals/design-and-ui/responsive/#how_to_choose_breakpoints

You could probably use the dev tools, if you go to "more tools", then "developer tools", a window should pop up and on the far left top corner there should be an icon of square and a mouse arrow, directly left of that there should be another icon with a box and a smart phone, click on the box and smart phone icon and it should open up a tool that allows you to see how your website would look in different devices. At the top there should be a drop down menu were you can pick different devices, it should show the different device's widths. I hope that helps