Screen width and not the browser's width

[mojtabaavahdati]

How could I refer to the total width of the user’s screen and NOT its browser’s total width by use of the CSS alone? Is that possible?
I am asking this after using some percentages in my layout and then losing the perfect arrangement of the page while zooming.

[SamA74]

You can’t refer to screen width in css units, for example to set the size of an element.
vw and vh refer to the browser.
But you can refer to it in media queries by using device-width instead of width
Though I’m curious why you ask, as width is generally a more useful measurement.

[PaulOB]

@mojtabaavahdati

How could I refer to the total width of the user’s screen and NOT its browser’s total width

If you mean the users ‘monitor width’ (or device width) then generally that is not something you should be concerned with as you are actually interested in is the amount of space available in which to show your design. A device width won’t tell you if the user has their browser maximised or half open (as mine always are). You should just concentrate on the available browser screen width as found in the normal way. e.g width 100%(vw) etc or via media queries with max or min-width.

You may need to provide an example of the problem so we can advise better as we may be barking up the wrong tree

[mojtabaavahdati]

Hey Paul, Thanks for taking your time.
I just wrote an answer and it was duplicated on the page, So I deleted one, but both of them wiped out!
I am wrecked!
Ok, let me write it once again.
Take a look at this please: Sample
This is exactly what i want, because it doesn’t change shape when i zoom in and out or when i change the browser’s width or height. It’s kind of IResponsive indeed!
I want my design to be like an image, I have designed a similar one with HTML+CSS, but it always keeps distance with the browser’s borders. That’s aweful
Here it is: Mine

[SamA74]

@mojtabaavahdati

This is exactly what i want, because it doesn’t change shape when i zoom in and out or when i change the browser’s width or height. It’s kind of IResponsive indeed!

That would be easily achievable by setting a fixed width on the body element:-

body {
    width: 1200px;
    margin 0 auto
}

But I don’t understand why you want this behaviour, it is a very out-dated way of laying out a website. It will only be easily viewable on large screen devices.
I think your time would be better spent improving how the layout adapts to smaller screens, so it looks good at any size.

[mojtabaavahdati]

Thank you.
I was after it because i am not ready yet for making my design responsive, and wanted to experience the old simple way at the first stage. I know this is not preferable, but I am only a beginner.