HTML and CSS Reference
In-Depth Information
Look at the devices below along with their specs. Can you design a set of media queries
to target each device?
Smartphone:
480 by 640
pixels
Tablet, portrait,
or landscape:
1,024 by 768
pixels
Internet TV: 2,650 by 1,600
pixels, landscape
Desktop PC: 1,280
by 960 pixels
<link rel="stylesheet" href="lounge-smartphone.css"
media=" ">
<link rel="stylesheet" href="lounge-tablet-portrait.css"
media=" ">
<link rel="stylesheet" href="lounge-tablet-landscape.css"
media=" ">
<link rel="stylesheet" href="lounge-pc.css"
media=" ">
<link rel="stylesheet" href="lounge-tv.css"
media=" ">
screen and (max-
device-width: 480px)
screen and (max-dev
ice-width: 1024px) and (orientation:portrait)
screen and (max-device-width: 1024px) and (orientation:landscap
e)
scree
n and (max-device-width: 1280px)
screen and (max-device-width: 2650px)
Media query support across devices
is evolving, so check the Web for the
latest and greatest techniques.
Our answers here. Did you get the same answers? There are many
ways to do this with varying degrees of specificity. If you did it
differently, are yours better or worse than ours?
