- min-
- max-
- >=
- > NEW
- <
@media (min-width: 600px) @media (max-width: 600px) @media (width >= 600px) @media (width > 600px) @media (width < 600px) @media (width: 600px)
Media Queries
This section:
1. Media Type & Screen Size
2. Screen Resolution
3. Device Capability
4. Browser Capability
10 Media Queries (2.1)
- all
- aural
- handheld
- braille
- embossed
- projection
- screen
- tty
- tv
<link media="screen" ...
<style media="screen">
@import "myCSS.css"; ...
@import url(myCSS.css) screen;
@media screen {}
<?xml-stylesheet media="screen" ...
Varied Screen Sizes
- Wrist Watch
- Smart Phone
- Tablet
- Laptop
- Monitor
- TV
- portrait? landscape? resolution?
Media Queries
@media screen and (max-width: 600px) {
#presentation {
background: red;
}
}
@media screen and (orientation: portrait) {
#presentation {
background: yellow;
}
@media screen and (orientation: landscape) {
a[href^="mailto:"]:before {
content: url(icons/email.gif);
}
}
media queries
<link rel='stylesheet' media='screen and (min-width: 320px) and (max-width: 480px)'
href='css/smartphone.css' />
@media screen and (max-width: 480px){
selector { /* small screen */
property: value;
}
}
@media screen and (orientation: landscape) {
selector { /* landscape properties */
property: value;
}
}
@media screen and (min-device-pixel-ratio: 1.5) {
selector { /* properties for higher resolution screens */
property: value;
}
}
Breakpoints
OpenSignal.com
media query properties
- (min/max)-width: viewport width
- (min/max)-height: viewport height
(min/max)-device-width: screen width(min/max)-device-height: screen height- orientation: portrait(h>w) | landscape(w>h)
- (min/max)-aspect-ratio: width/height
(min/max)-device-aspect-ratio: device-width/height- (min/max)-resolution: 72dpi | 100dpcm
- (min/max)-color:
- (min/max)-color-index:
- (min/max)-monochrome: 0 | 1+
- scan: progressive | interlace (tv)
- grid: 0 | 1 (grids (like tty) or bitmap)
- See Media Queries Spec
- case insensitive
- unknown media types == false
Media Features
width- Width of the viewport
height- Height of the viewport
aspect-ratio- Width-to-height aspect ratio of the viewport
orientation- Orientation of the viewport
resolution- Pixel density of the output device
scan- Scanning process of the output device
grid- Does the device use a grid or bitmap screen?
update- How frequently the output device can modify the appearance of content.
none | slow | fast(Media Queries 4) overflow-block- How does the output device handle content that overflows the viewport along the block axis?
none | scroll | optional-paged | paged(Media Queries 4) overflow-inline- Can content that overflows the viewport along the inline axis be scrolled?(Media Queries 4)
color- Number of bits per color component of the output device, or zero if the device isn't color.
@media (min-color: 1)means it's a color device color-gamut- Approximate range of colors that are supported by the user agent and output device.
srgb | p3 | rec2020(Media Queries 4) color-index- Number of entries in the output device's color lookup table, or zero if the device does not use such a table.
@media (color-index) { … }or@media (color-index >= 1) { … }or@media (min-color-index: 1)matches color index devices display-mode- The display mode of the application, as specified in the web app manifest's
displaymember (Defined in the Manifest Spec) monochrome- Bits per pixel in the output device's monochrome frame buffer, or 0 if the device isn't monochrome
inverted-colors- Is the user agent or underlying OS inverting colors? (Deferred - Media Queries Level 5)
pointer- Is the primary input mechanism a pointing device, and if so, how accurate is it?
none | coarse | fine(Media Queries 4) hover- Does the primary input mechanism allow the user to hover over elements?(Media Queries 4)
any-pointer- Is any available input mechanism a pointing device, and if so, how accurate is it?(Media Queries 4)
any-hover- Does any available input mechanism allow the user to hover over elements? (Media Queries 4)
light-level- Light level of the environment (Deferred - Media Queries Level 5)
scripting- Is scripting (e.g., JavaScript) available? (Deferred - Media Queries Level 5)
device-width- Width of the rendering surface of the output device - Deprecated
device-height- Height of the rendering surface of the output device - Deprecated
device-aspect-ratio- Width-to-height aspect ratio of the output device - Deprecated
Resolution Units
- dpi: dots per inch (72, 96)
- dpcm: dots per centimeter (1dpcm ≈ 2.54dpi)
- dppx: dots per pixel
1dppx = 96dpi (default resolution of images)
Note: 0 is invalid. O is not equal to 0dpi, 0dpcm, or 0dppx.
High Resolution Implementation
Safari v. Everyone Else
-webkit-min-device-pixel-ratio: 2 min-resolution: 2dppx min-resolution: 192dpi
dppx fallback
min-resolution: 192dpi
@media (-webkit-min-device-pixel-ratio: 2), /* Safari */
(min-resolution: 192dpi) /* Everyone else */ {}
- Parentheses around expressions are required
const dpi = window.devicePixelRatio;
Media Query Syntax/Punctuation
"only" leaves out older browsers
media="only print and (color)"
"and" - both parts must be true
media="only screen and (orientation: portrait)"
"not" - if untrue
media="not screen and (color)"
Comma separates selectors - any part can be true
media="print, screen and (min-width: 480px)"
range v. discrete v. boolean
- (color)
- (width)
@supports
Capability Detection
@supports
@supports (display: flex){
/* rules for browsers supporting unprefixed flex box */
}
Don't use
@media screen and (transform-3d) {
.transforms {}
}
@media screen and (min-width: 320px) and (max-width: 500px){
@-ms-viewport { width: device-width;}
}
viewport
Viewport
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1"/>
- width
- Size of the viewport in number of pixels or
device-width(width of screen) - height
- Height of the viewport in number of pixels or
device-height(height of screen) - initial-scale
- zoom level when page is first loaded
- maximum-scale
- minimum-scale
- user-scalable
- Are users allowed to zoom the page
@viewport {
width: device-width; zoom: 0.5;
}
- min-width
- ‘auto’, ‘device-width’, ‘device-height’, an absolute length, or a percentage as specified
- max-width
- ‘auto’, ‘device-width’, ‘device-height’, an absolute length, or a percentage as specified
- width
- min-height
- ‘auto’, ‘device-width’, ‘device-height’, an absolute length, or a percentage as specified
- max-height
- ‘auto’, ‘device-width’, ‘device-height’, an absolute length, or a percentage as specified
- height
- zoom
- auto, positive number or percentage
- min-zoom
- Minimum zoom factor allowed. auto, positive number or percentage
- max-zoom
- Maximum zoom factor allowed. auto, positive number or percentage
- user-zoom
- zoom or fixed. User can or can't zoom in/out.
- orientation
- auto, portrait or landscape.
@media screen and (max-width:400px) {
@-ms-viewport { width:320px; // or device-width;}
}
Viewport Sidenote
If <meta> is set to disable zoom, there is no delay on onClick events.
If <meta> is set to disable zoom, you're a jerk!
Mobile Specific CSS
Tap Highlight Color
-webkit-tap-highlight-color: #bada55;
Prevent Select & Hold dialogue
-webkit-user-select: none;
Prevent Images Dialog
-webkit-touch-callout: none;
Prevent accidental OS popups (panning)
-ms-touch-action: none;
Use Cases
Relative width
CSS Hyphenations, <WBR> and &Shy;
Columns
column-count: 1; column-width: 10em; column-rule: 1px solid #bbb; column-gap: 2em;
Adipisicing rump nostrud exercitation turkey, bresaola deserunt ullamco beef ribs pork loin ball tip pig pork belly nisi. Cillum sunt officia deserunt, beef aliqua ham ut t-bone sed ut consequat shoulder. Nostrud excepteur biltong non, fatback salami incididunt beef cupidatat occaecat.
Reprehenderit ham hock labore tri-tip chuck, excepteur ut. Meatball sint enim beef ribs, mollit laborum flank commodo fatback pariatur tail rump eiusmod spare ribs dolore. Ut minim qui, tongue eu short ribs pancetta excepteur incididunt culpa consequat pastrami magna chuck. Flank sunt sint, occaecat ut adipisicing labore turkey laboris in magna.
Chicken bacon meatloaf minim meatball salami sunt spare ribs.
Bacon sed tail, pork loin pariatur meatloaf hamburger exercitation corned beef shank ex esse sirloin qui beef ribs. Consectetur anim corned beef, cupidatat ex enim tempor. Pariatur consectetur ad, enim ut quis consequat aliquip exercitation jowl tenderloin ham dolore.
Fugiat excepteur aliqua, cow dolor swine shoulder elit tri-tip shankle. Irure consectetur cow labore, cupidatat exercitation ea jerky ham officia dolore tongue eu aliqua. Ham hock irure beef ribs non, flank sausage eiusmod ham short loin nostrud.
Prefix -webkit & -moz. Supported since IE 10, O 11.1, all webkit, all FF