Add media queries info in Kendo UI and responsive web article

Author: yordanov

using-kendo-in-responsive-web-pages.md

@@ -77,7 +77,7 @@ Each Kendo UI widget has a `resize()` method, which can be used to trigger a lay
 The widget `resize` method accepts a single boolean parameter, which defines whether the widget should execute its layout adjustment algorithm
 even if the widget's dimensions have not changed ("force" mode).
 
-### Example: using widget `resize()`
+#### Example: using widget `resize()`
 
     var gridWidget = $("#GridID").data("kendoGrid");
 
@@ -88,4 +88,18 @@ even if the widget's dimensions have not changed ("force" mode).
     // force layout readjustment without setting a new height
     gridWidget.resize(true);
 
-The code above uses a `wrapper` field, which is documented in the [Widget wrapper and widget element](/framework/widgets/wrapper-element) page.
+The code above uses a `wrapper` field, which is documented in the [Widget wrapper and widget element](/framework/widgets/wrapper-element) page.
+
+## Kendo UI and media queries
+
+Kendo UI uses media queries to enhance the behavior of Kendo UI widgets on different form factors. Media queries, a part of the [CSS3 specification](http://www.w3.org/TR/css3-mediaqueries/), load different set of styles to different devices, delivering improved and unified end user experience.
+
+#### CSS media query example:
+
+    @media only screen and (max-width: 480px) {
+        h2 {
+            font-size: 14pt;
+        }
+    }
+
+Kendo UI responsive styles use the Non-Mobile First Method with media queries having max-width breakpoints. Max-width refers to every window or device with width or screen-width of less than or equal to the amount given. That said, styles written e.g. under 480px breakpoint will override the base styles on screens of max-width equal to 480px or less.