--- a/css.rst Mon Feb 22 17:23:48 2016 +0200
+++ b/css.rst Mon Feb 22 19:56:10 2016 +0200
@@ -100,6 +100,71 @@
Media queries
=============
+Syntax for media queries inside CSS file is::
+
+ @media print { ... }
+
+ @media (min-width: 400px) and (max-width: 600px) { ... }
+
+ @import url(print.css) print;
+
+It is possible to link to CSS file with media queries with ``media`` attribute::
+
+ <link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
+ <link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
+ <link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
+ <link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
+
+Possible predicates:
+
+ ``(min-width: VAL)``
+ Rules applied for any browser width over the value defined in the query.
+ ``(max-width: VAL)``
+ Rules applied for any browser width below the value defined in the query.
+ ``(min-height: VAL)``
+ Rules applied for any browser height over the value defined in the query.
+ ``(max-height: VAL)``
+ Rules applied for any browser height below the value defined in the query.
+ ``(orientation=portrait)``
+ Rules applied for any browser where the height is greater than or equal to the width.
+ ``(orientation=landscape)``
+ Rules for any browser where the width is greater than the height.
+
+See:
+
+ https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries
+ Use CSS media queries for responsiveness
+
+Viewport
+========
+
+Specs:
+
+ https://www.w3.org/TR/css-device-adapt/
+ Unpublished: CSS Device Adaptation Module Level 1
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
+ ``viewport`` attribute in ``meta`` tag.
+ https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
+ Firefox mobile support for viewport.
+ https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
+ Original viewport specs.
+
+Compatibility:
+
+ http://www.quirksmode.org/mobile/tableViewport.html
+ Compatibility table.
+ http://viewportsizes.com/
+ Device table with viewport width.
+
+Articles:
+
+ http://www.quirksmode.org/mobile/viewports.html
+ How viewports and the widths of various important elements work, such as the
+ ``<html>`` element, as well as the window and the screen.
+ http://www.quirksmode.org/mobile/viewports2.html
+ How viewports and the widths of various important elements work, such as the
+ ``<html>`` element, as well as the window and the screen.
+
CSS compilers
=============