info/learnxinyminutes-docs
1
0
Fork 0
mirror of https://github.com/adambard/learnxinyminutes-docs.git synced 2025-08-06 23:06:49 +02:00
Code Issues Releases Wiki Activity

[css/en] Add media queries section, demonstrating basics of print and mobile media queries. (#1637)

Browse Source 
Also improved link to Can I Use
Change HTML snippets to HTML 5
Fix minor whitespace issues
Add myself as a contributor
This commit is contained in:
Brett Taylor
2016-09-06 20:30:22 +12:00
committed by ven
parent 1bb288155c
commit 5252f94a17
1 changed files with 47 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
css.html.markdown
View File

@@ -6,8 +6,8 @@ contributors:
- ["Geoffrey Liu", "https://github.com/g-liu"] - ["Geoffrey Liu", "https://github.com/g-liu"]
- ["Connor Shea", "https://github.com/connorshea"] - ["Connor Shea", "https://github.com/connorshea"]
- ["Deepanshu Utkarsh", "https://github.com/duci9y"] - ["Deepanshu Utkarsh", "https://github.com/duci9y"]
- ["Brett Taylor", "https://github.com/glutnix"]
- ["Tyler Mumford", "https://tylermumford.com"] - ["Tyler Mumford", "https://tylermumford.com"]
filename: learncss.css filename: learncss.css
--- ---
@@ -193,10 +193,10 @@ selector {
Save a CSS stylesheet with the extension `.css`. Save a CSS stylesheet with the extension `.css`.
```xml ```html
<!-- You need to include the css file in your page's <head>. This is the <!-- You need to include the css file in your page's <head>. This is the
recommended method. Refer to http://stackoverflow.com/questions/8284365 --> recommended method. Refer to http://stackoverflow.com/questions/8284365 -->
<link rel='stylesheet' type='text/css' href='path/to/style.css' /> <link rel='stylesheet' type='text/css' href='path/to/style.css'>
<!-- You can also include some CSS inline in your markup. --> <!-- You can also include some CSS inline in your markup. -->
<style> <style>
@@ -241,8 +241,8 @@ p { property: value !important; }
and the following markup: and the following markup:
```xml ```html
<p style='/*F*/ property:value;' class='class1 class2' attr='value' /> <p style='/*F*/ property:value;' class='class1 class2' attr='value'>
``` ```
The precedence of style is as follows. Remember, the precedence is for each The precedence of style is as follows. Remember, the precedence is for each
@@ -259,6 +259,48 @@ recommended that you avoid its usage.
* `B` is next. * `B` is next.
* `D` is the last one. * `D` is the last one.
## Media Queries
CSS Media Queries are a feature in CSS 3 which allows you to specify when certain CSS rules should be applied, such as when printed, or when on a screen with certain dimensions or pixel density.
```css
/* A rule that will be used on all devices */
h1 {
font-size: 2em;
color: white;
background-color: black;
}
/* change the h1 to use less ink on a printer */
@media print {
h1 {
color: black;
background-color: white;
}
}
/* make the font bigger when shown on a screen at least 480px wide */
@media screen and (min-width: 480px) {
h1 {
font-size: 3em;
font-weight: normal;
}
}
```
Media queries can include these features:
`width`, `height`, `device-width`, `device-height`, `orientation`, `aspect-ratio`, `device-aspect-ratio`, `color`, `color-index`, `monochrome`, `resolution`, `scan`, `grid`. Most of these features can be prefixed with `min-` or `max-`.
The `resolution` feature is not supported by older devices, instead use `device-pixel-ratio`.
Many smartphones and tablets will attempt to render the page as if it were on a desktop unless you provide a `viewport` meta-tag.
```html
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
</head>
```
## Compatibility ## Compatibility
Most of the features in CSS 2 (and many in CSS 3) are available across all Most of the features in CSS 2 (and many in CSS 3) are available across all