How to get screen size on css3?

Question

I'm trying to see if your screen is a specific amount of pixels so if it's smaller that for example 1000px this will happen:

max-width:750;

This is the pixels on the web browser like google chrome and also will get bigger when you zoom out on google chrome if possible. Thank you.

I'm not sure what you mean there but like, google chrome width — David Callanan, Mar 25 '14 at 17:32

score 2 · Accepted Answer · answered Mar 25 '14 at 17:39

2

What you're looking for can be done with CSS3 media queries. They're a way to execute CSS only under certain conditions. Here's the MDN article, too.

Your media query might look like this:

@media (max-device-width : 1000px) {
    /* CSS */
}

answered Mar 25 '14 at 17:39

potterbm

Is the mign-device-width the google chrome or the screen, just wondering. But should be fine. – David Callanan Mar 25 '14 at 17:41
See the answer by @Clayton. I really should have included that in my answer. – potterbm Mar 25 '14 at 23:21
This is not working. Does this matter when I'm using a seperate css file? – David Callanan Mar 28 '14 at 18:23
Hi, I'm looking back at this question years later. I made no sense then but it looks like your answer was what I was looking for, so I will accept it. Thank you for the help! – David Callanan Aug 04 '17 at 12:01

score 1 · Answer 2 · answered Mar 25 '14 at 18:19

1

max-width is the width of the target display area, ex:Google Chrome

max-device-width is the width of the device's entire rendering area, ex:the mobile device screen

answered Mar 25 '14 at 18:19

Clayton

Should this work then? #main{ max-width: max-width/4*3; – David Callanan Mar 26 '14 at 16:16

2 Answers2