CSS media queries by div width or height

Question

Is it possible, to specific CSS styles by some DIV width or height?

Something like this:

@media screen and (max-width: 1024px)

I can't think of a good reason on why it would be needed – LcSalazar Oct 09 '14 at 18:12 — LcSalazar, Oct 09 '14 at 18:12

score 3 · Accepted Answer · edited May 21 '15 at 13:30

3

You can do this with jQuery.

function change_size(){
   var window_height = $(window).height();
   var div_height = $("#your_id").height();
   if(window_height < div_height){
          $("#your_id").css({marginTop: "20px", height: "20px"});  //for example
   }
}

$(document).ready(function(){
   change_size();
});
$(window).resize(function(){
   change_size();
});

edited May 21 '15 at 13:30

ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

2,754
1
26
39

answered Oct 09 '14 at 18:06

IVIajid

190
9

Ok and what about loading other CSS files, based on DIV size? Will it change, when I apply it on resize event? – general666 Oct 09 '14 at 18:24
you mean when you resize the window? – IVIajid Oct 09 '14 at 18:27
yes on window resize – general666 Oct 09 '14 at 18:30
I edited the answer. See it again. – IVIajid Oct 09 '14 at 18:33
yes I mean this but I want to include whole CSS file... Will it work? – general666 Oct 09 '14 at 18:37
why not? Just be careful about the id of your div. – IVIajid Oct 09 '14 at 18:42
did it work for you? – IVIajid Oct 09 '14 at 19:05

CSS media queries by div width or height

1 Answers1