diff options
| author | Brett Taylor <Glutnix@users.noreply.github.com> | 2016-09-06 20:30:22 +1200 |
|---|---|---|
| committer | ven <vendethiel@hotmail.fr> | 2016-09-06 10:30:22 +0200 |
| commit | 5252f94a17dc63f8fddaeb0d206bb0c30d4cfb70 (patch) | |
| tree | a25b3e0d1f3a4657316209344627d24232a74d03 | |
| parent | 1bb288155caf81b8c436e7d2f10421c2c08e78c4 (diff) | |
[css/en] Add media queries section, demonstrating basics of print and mobile media queries. (#1637)
Also improved link to Can I Use
Change HTML snippets to HTML 5
Fix minor whitespace issues
Add myself as a contributor
| -rw-r--r-- | css.html.markdown | 52 |
1 files changed, 47 insertions, 5 deletions
diff --git a/css.html.markdown b/css.html.markdown index fc07fce4..1952d21f 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -6,8 +6,8 @@ contributors: - ["Geoffrey Liu", "https://github.com/g-liu"] - ["Connor Shea", "https://github.com/connorshea"] - ["Deepanshu Utkarsh", "https://github.com/duci9y"] + - ["Brett Taylor", "https://github.com/glutnix"] - ["Tyler Mumford", "https://tylermumford.com"] - filename: learncss.css --- @@ -193,10 +193,10 @@ selector { 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 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. --> <style> @@ -241,8 +241,8 @@ p { property: value !important; } and the following markup: -```xml -<p style='/*F*/ property:value;' class='class1 class2' attr='value' /> +```html +<p style='/*F*/ property:value;' class='class1 class2' attr='value'> ``` 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. * `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 Most of the features in CSS 2 (and many in CSS 3) are available across all |