Recently doing some special processing when page Print exposed to media queries, want to learn about the system, in MOZILLA DEVELOPER NETWORK I saw an article talking about is very good, in conjunction with their use of summary.
CSS2 / media
Can be used in the CSS2 media property allows only its role in the specified media type specific style, such as the need to hide some parts of the page when printing or larger, this time you can use the media to make certain style only take effect when printing
{Print @media
/ * suitable for printing style * /
}
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
Popular media types
- all (all), applies to all devices.
- Handheld (hand-held), for handheld devices.
- print (printing), to view the document on a screen under the tab material and a print preview mode.
- Projection (Projection) for projecting a presentation, such as a projector.
- screen (the screen), mainly for computer screens.
When used in the instruction can be written directly @media stylesheet media type by a space (a plurality of spaced apart are good)
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }parsing-errors
}
@media screen, print {
body { line-height: 1.2 }
}
CSS3/meidia queries
In CSS3 it has been enhanced to add more media queries, CSS3 Media Queries in adding more media queries, and can add different types of media expression is used to check whether the media subject to certain conditions, for example, if a web page using a PC to access and use the Pad to access a different style, in CSS2 media types can only set the screen can not be done, but in CSS3 expressions can further determine the screen size of the screen is set to achieve this type of media a function. You can write code
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
When the media types match and when the expression is true, the corresponding style will be its effect, unless not or only operator, or media types is not required, default on behalf of all media types.
Operators
and
and a plurality of media operator for query Feature combined into one, and for combining the media type and media Feature, a basic media query like this, a meidia feature type acting on all media
@media (min-width: 700px) { ... }
However, if the application may want to use and operator in landscape mode and the media type media feature combination
@media (min-width: 700px) and (orientation: landscape) { ... }
Such media query above only within the visible window (the viewport) is minimal and is only returned when 700px lateral display true, if you want the device to further limit this can tv
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
Comma-separated list
In a comma-separated list of queries for each query is treated as a separate query, the query role in any of this symbol does not affect other queries, as long as there is a query returns true, style will be action.
For example, if you want a particular style in the minimum width of 700px viewport to take effect on or handheld device, you can write:
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
not
not the entire scope operator query, it returns true only use not only in the case of the entire query returns false. When using a comma-separated list when not acting on the neighboring query, but does not act on each query
@media not all and (monochrome) { ... }
In fact, this query will work
@media not (all and (monochrome)) { ... }
But not so
@media (not all) and (monochrome) { ... }
For comma-separated list
@media not screen and (color), print and (color)
Query is like this
@media (not (screen and (color))), print and (color)
only
only operators do not support media queries to prevent media feature with a browser application specific style
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
media features
He said that many times the media feature, in the end how many media feature it
- width: width of the browser
- height: the height of the browser
- device-width: the width of the screen resolution of the value of the device
- device-height: the height of the screen resolution value of the device
- orientation: the direction of the browser window vertical or horizontal, when the value of the window is greater than the height of the characteristic value is equal to the width Portrait, otherwise landscape.
- aspect-ratio: the ratio of the value of the aspect ratio of the browser.
- device-aspect-ratio: the ratio of the value of the aspect ratio of the screen.
- color: the device how many bits of color values, if not a color device, a value of 0
- color-index: the number of colors in the color table
- monochrome: monochrome frame buffer for each pixel of the byte
- resolution: the resolution values, device resolution value
- scan: television type scanning device, progressive or interlace
- grid: limited to two values 0 or 1
How to introduce media
There are two common ways to introduce
1, link method of introducing
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
2, @ media introduction
@media screen and (min-width: 600px) and (max-width: 800px) {
selector {
properties:;
}
}
Browser Compatibility
application
For iPhone 4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
For iPad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
IPad Safari on mobile devices and on the iPhone is the same, except that they only iPad declared in different directions, such as the above example, when using longitudinal portrait.css (Portrait) to, in lateral (landscape ) when using landscape.css.
For Android
/*240px的宽度*/ <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" /> /*360px的宽度*/ <link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" /> /*480px的宽度*/ <link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />
reference
http://www.w3cplus.com/content/css3-media-queries
http://www.w3cplus.com/css3/css3-media-queries-for-iPhone-and-iPads
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries