I have not yet seen this question asked on here but I was wondering if anyone knows if it is possible to have a media query based on a container or parent element that was based on it width. The user case for this is when you have a menu that pops in from the left and decreases the size of the main windows container. Here is an example website where you can see the menu pops open but the content on the page cannot change based on its new width
http://tympanus.net/Tutorials/FullscreenBookBlock/
Media queries aren't designed to work based on elements in a page.
Setting a particular "width-range" isn't any different from the way media queries are created. The only difference is the addition of more media feature expressions (that is, the screen width sizes). Take a look: @media only screen and (min-width: 360px) and (max-width: 768px) { // do something in this width range. }
only screen: The only keyword is used to prevent older browsers that do not support media queries with media features from applying the specified styles.
@media is the actually media query. The word screen is adding the 'conditions' to the media query. So @media screen is telling the media query to apply (whatever other conditions) to screens. For example, @media screen and (max-width: 360px) will target only screens with a max-width of 360px.
I've been looking into this too. So far I've been impressed with Andy Hume's approach http://blog.andyhume.net/responsive-containers/ https://github.com/ahume/selector-queries/
I think you want something different than what you're asking for.
Media-queries are meant to query something specific to the device (media) you use, not to do animations or other visual stuff.
To rebuild the example you posted here is fairly simple to rebuild, but has (excepted for it's responsiveness) nothing to do with media-queries.
They created a normal page, having two states. In the one state only the content is visible and in the other state the menu is visible and the content is partly (taken the width of the menu) moved out of the screen.
You declare which element and which option should be transitional. Here's an example, where I configure that changing width or margin of an element will start an animation which takes 3sec:
div { transition: width 3s, margin 3s; -moz-transition: width 3s, margin 3s; -webkit-transition: width 3s, margin 3s; -o-transition: width 3s, margin 3s; }
Toggling between these two states is done by adding a css-class and the animation you see is configured by a CSS3 setting called transition.
I recommend reading something like https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions
FYI: I rebuild something like the website you showed, just as a prove of concept: http://jsfiddle.net/W3PF4/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With