Media Query-like behaviour on width of a specific div

Question

I\'m building an editor where the content of a post is loaded in a div, and jQuery selectors allow me to edit the content inline.

I just ran into a bit of a hurdle a

Answer 1

Update (2018):

This is still a common problem for many developers. There is no way without javascript to query the size of an element. It's also very difficult to implement in CSS because of the 'cyclic dependencies' it causes (element relies on another to determine its size, element query causes size change in child which causes size change in parent which causes size change in child ETC...)

There is a great summary of the current element query landscape.

The go-to solution these days is the EQCss library https://github.com/eqcss/eqcss, or handling the changes within a javascript framework like React or Vue using a "CSSinJS" type solution.

My old and hilariously janky "solution":

For now I am using:

.preview {
    zoom: .8; 
    -moz-transform: scale(0.8);}

when the .preview div is 80% of the page width. It's generally working, but with a few issues, and it is not entirely flexible since the divs in question will not always be set % of the page width.

Answer 2

Unfortunately there is not currently a way for a media query to target a div. Media queries can only target the screen, meaning the browser window, mobile device screen, TV screen, etc...