This repository has been archived by the owner. It is now read-only.
Ⓜ️ A cross-browser solution for syncing Javascript functionality with CSS media queries
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
README.md

README.md

Media-Query-Sync

A cross-browser solution for syncing Javascript functionality with CSS media queries

Read more about this technique here

How To

In your CSS file

  1. Add a font-family property to the head element with a value you wish to use for the name of your breakpoint
  2. Add an :after pseudo element with a content value the same as your font-family property to the body element
  3. Repeat steps 1 and 2 for each media queries you want to sync with JavaScript.

Remember, "The absence of support for @media queries is in fact the first @media query." - Bryan Rieger

In the mqSync function

  1. Set up conditions for your breakpoint variables from you CSS file
  2. Add the JavaScript you want executed in sync with your media queries inside the conditions you created

Demo

View Demo - with respond.js

View Demo - without respond.js

Thanks

Jeremy Keith, Chris Coyier, Emil Björklund