Experiment to test the rendering speed of media queries.
-
Updated
Mar 15, 2016 - CSS
Media Queries are a way to target browsers by certain characteristics, features, and user preferences, then apply styles, or run other code based on those things. They are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. Media queries are used for the following:
@media
and @import
at-rules<style>
, <link>
, <source>
, and other HTML elements with the media=
attributeWindow.matchMedia()
and EventTarget.addEventListener()
methodsA media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators.
* **all:** Suitable for all devices.
* **print:** Intended for paged material and documents viewed on a screen in print preview mode.
* **screen:** Intended primarily for screens.
* **Viewport/Page Characteristics**
* **Display Quality**
* **Color**
* **Interaction**
* **Video-prefixed:** The spec references user agents, including TVs, that render video and graphics in two separate planes that each have their own characteristics. _(upcoming Media Queries Level 5)_
Experiment to test the rendering speed of media queries.
Responsive design navigation creation
Front-end Fundamentals - How To Use Media Queries For Responsive Websites Companion Code
Scale media query `-width` by some percentage
Gulp plugin, which extracts media queries to a separate file
Broccoli plugin to combine media queries
RWD切版練習,使用flexbox排版、media query進行相關設定,如mobile menu等等,其他還整合jquery、pug、scss、gulp、font-awesome等工具的使用來完成相關練習。
Universal media queries for React Native and web
Implementation of MediaQueryList for Elm
Browser window dimensions via CSS
Sass mixin which builds media queries, from simple to complex.
Easy and predictable SASS/SCSS media queries
Responsive Landing Page made with Flexbox and Media Queries
It'll help you write media queries the easy way, plus other interesting functions to make you more productive coding css.
Humans is designed for mobile and desktop for human users. And it is vue-based implementation. To help developer to build UI quickly.
Media query, images, retina, and typography responsiveness
Created by Håkon Wium Lie, W3C
Released June 19, 2012