How to switch between CSS rule sets, based on available parent width (not viewport width)?

问题

I know that @media can be used to detect properties of the whole viewport, and then switch among CSS rule sets based on different types of media/widths, etc ..

But how does one switch between CSS rules based on the width of parent div, etc ?

This code preview shows the footer of my page, with some elements changed/removed:

Liveweave: http://liveweave.com/JtUxpF (Switch to Split V or View mode from the top menu)

On the right side of the footer, there is a small form (marked with the red arrow in the picture above). This form has a @media separation applied to it, like so:

@media all and (min-width: 270px) {
    /* Apply first set of CSS rules */
}

@media not all and (min-width: 270px) {
/* Apply second set of CSS rules */
}

Problem:

My idea was to actually apply CSS rules based on the width available to the form from the parent div. However the CSS rules are currently applied based on the width of the screen/viewport.

If you reduce your window's width to less than 270 pixels, you'll see the visual change in the form's look!

So how can I choose and apply between two different sets of CSS rules, based on the width available to the form, instead of the viewport width itself ?

回答1:

Not possible in pure css. The equivalents of "if" statements in css is currently limited to media queries and selectors, neither of which get you what you need. You can use something like less or sass to do what you're trying to do, or you can generate rules dynamically using a server-side or javascript approach.

sass: http://sass-lang.com/ less: http://lesscss.org

There is some support for math in css (calc()), but no ability to use those as conditional clauses.

来源：https://stackoverflow.com/questions/17640057/how-to-switch-between-css-rule-sets-based-on-available-parent-width-not-viewpo