I require assistance in constructing a media query, which will allow me to target desktops/laptops. I’m using the table below as a reference for display sizes.
Listed sizes in the Display Size list correspond to the Optimal Canvas Width list.
Display Sizes (in pixels):
- 800×600
- 1024×768
- 1280×800
Optimal Canvas Width (in pixels):
- width 780
- width 960
- width 1220
The table I’m using as a reference basically lists layout widths to use for each display size, but that is not what I’m confused about. What I don’t understand is how to construct a media query for all styles within these widths.
This is what I have so far:
<link rel="stylesheet" href="file.css" media="only screen and (min-width: 780px) and (max-width: 1220px)">
All I want to know is if I’m doing this right. Hope I’ve explained this clearly enough! Thanks in advance!
Not sure about the ‘only’, but otherwise it looks fine. This will match screens between 780 and 1220px wide. You should add other queries for other sizes to include different files for those sizes.
Remember not to specify a min-width for the smallest, and no max-width for the largest, otherwise you won’t have any (specific) styling on very small or very large screens.
Note that you can test your media queries quite easily. Just resize your browser window.