CSS Media Queries
CSS
Media queries are a way to target browsers by certain
characteristics, features, and user preferences, then apply styles or run other
code based on those things. Perhaps the most common media queries in the world
are those that target particular viewport ranges and apply custom styles, which
birthed the whole idea of responsive design.
A
Media query is a CSS3 feature that makes a webpage layout
into different screen sizes and media types.
Media queries allow one
to apply CSS rules based on the type of device or media (example.
screen, print, or handheld) called media type, additional perspectives of
the device are described with media features such
as the accessibility of color, and position or viewport dimensions.
General
Structure of a Media Query
@media [...] {
/* One or more CSS rules apply */
}
A Media Query containing a Media Type
@media print {
/* One
or more CSS rules apply */
}
A Media Query
containing a Media Type and a Media Feature
@media screen
and (max-width: 720px) {
/* One or more CSS rules apply */
}
A Media Query
containing a Media Feature (and an implicit Media Type of "all")
@media (orientation: portrait)
{
/* One
or more CSS rules apply */
}
Example
@media screen and (min-width: 760px)
{
body {background-color: green;}
}
The above media
query specifies two conditions:
1. The page
must be viewed on a normal screen (not a printed page, projector, etc.).
2. The width of
the user's viewport must be at least 760 pixels. If these conditions are met,
the styles inside the media query will be active, and the background color of
the page will be green.
Media queries
are applied dynamically. If on page load the conditions specified in the media
query are met, the CSS will be applied, but will be immediately disabled should
the conditions cease to be met. Conversely, if the conditions are initially not
met, the CSS will not be applied until the specified conditions are met.
In our example,
if the user's viewport width is initially greater than 760 pixels, but the user
shrinks the browser's width, the background color will cease to be green as
soon as the user has resized the viewport to less than 760 pixels in width.
Media
Type
Media queries have an optional media-type
parameter. This parameter is placed directly after the @media declaration
(@media media-type).
Example:
@media print { Html { background-color: blue; } }
The above CSS
code will give the DOM HTML element a blue background color when being printed.
The media-type
parameter has an optional not or only prefix that will apply the styles to everything
except the specified media type or only the specified media type, respectively.
Example:
@media not print { body { background-color: blue; } }
The above code
example will apply the style to every media type except print. And the same
way, for just showing it only on the screen, this can be used:
@media only screen { .fadeInEffects { display: block; } }
The list of media types
Media type |
Description |
all |
Apply to all devices |
screen |
Default computers |
print |
Printers in general. Used to style print versions of websites |
projection |
For projected presentations, for example, projectors |
aural |
Speech Systems |
tv |
Television-type devices |
tty |
Devices with a fixed-pitch character grid. Terminals, portables. |
Width
vs Viewport
When we are
using "width" with media queries it is important to set the meta tag
correctly. The basic meta tag looks like this and it needs to be put inside the
<head> tag.
<
meta name="viewport" content="width=device-width, initial-scale=1">
Based
on MDN's definition "width" is the width media feature that describes
the width of the rendering surface of the output device (such as the width of
the document window, or the width of the page box on a printer).
What does that
mean?
View-port is
the width of the device itself. If your screen resolution says the resolution
is 1280 x 720, your view-port width is "1280px". More often many
devices allocate different pixel amount to display one pixel. For example, Samsung
Galaxy S20 Ultra 1440 x 3200 resolution. But the actual viewport-width and
viewport-height is 412 x 915. That means 3 pixels are used to create 1 pixel.
But if you did not set the meta tag correctly it will try to show your webpage
with its native resolution which results in a zoomed-out view (smaller texts
and images).
How
to Using Media Queries to Target Deferent Screen Sizes?
Oftentimes,
responsive web design involves media queries, which are CSS blocks that are
only executed if a condition is satisfied. This is useful for responsive web
design because you can use media queries to specify different CSS styles for
the mobile version of your website versus the desktop version.
@media only screen and (min-width: 300px) and (max-width: 767px) {
.site-title {
font-size: 80%;
}
/* Styles in this block are only applied if the screen size is at
least 300px wide, but no more
than 767px */
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.site-title {
font-size: 90%;
}
/* Styles in this block are only applied if the screen size is at
least 768px wide, but no more
than 1023px */
}
@media only screen and (min-width: 1024px) {
.site-title {
font-size: 120%;
}
/* Styles in this block are only applied if the screen size is
over 1024px wide. */
}
Lest
of the media query parameters and description
Parameter |
Description |
Media type |
This is the type of media. Could be anything in the range of all
to the screen. |
not |
Doesn't apply the CSS for this particular media type and applies
for everything else. |
device-aspect-ratio |
Deprecated CSS will only display on devices whose height and width
ratio matches the specified ratio. This is a deprecated feature and is not
guaranteed to work. |
max-device-width |
Deprecated Same as max-width but measures the physical screen
width, rather than the display width of the browser. |
min-device-width |
Deprecated Same as min-width but measures the physical screen
width, rather than the display width of the browser |
max-device-height |
Deprecated Same as max-height but measures the physical screen
width, rather than the display width of the browser. |
min-device-height |
Deprecated Same as min-height but measures the physical screen
width, rather than the display width of the browser. |
media feature |
Logic to identify use case for CSS. Options are outlined below. |
media feature(aspect-ratio) |
Define the aspect ratio of the targeted display area of the
output device. |
media feature(color) |
Show the number of bits per color component of the output device.
If the device is not a color device, this value is zero. |
media feature(color-index) |
Show the number of entries in the color look-up table for the
output device. |
media feature(grid) |
Define whether the output device is a grid device or a bitmap
device. |
media feature(height) |
The height media feature describes the height of the output
device's rendering surface. |
media feature(max-width) |
CSS cannot apply on a screen width wider than specified. |
media feature (min-width) |
CSS cannot apply on a screen width narrower than specified. |
media feature (max- height) |
CSS cannot apply on a screen height taller than specified. |
media feature (min- height) |
CSS cannot apply on a screen height shorter than specified. |
media feature (monochrome) |
Indicates the number of bits per pixel on a monochrome
(greyscale) device. |
media feature (orientation) |
CSS can only display if the device is using a specified
orientation. See remarks for more details. |
media feature (resolution) |
Indicates the resolution (pixel density) of the output device. |
media feature (scan) |
Describes the scanning process of television output devices. |
media feature (Width) |
The width media feature describes the width of the rendering
surface of the output device (such as the width of the document window, or
the width of the page box on a printer). |
Leave a comment
No Cmomments yet