html styles css for different resolutions/screen size

i have to write html page that will look same in different resolutions/screen sizes. So if screen resolution is less the texboxes/labels etc would not appear too big and scrollbar appears because they are too big

Is there any new way in css/html to work with different resolutions/monitor sizes

I am not asking about mobile devices... just desktop monitors
i used to do it by checking screen-size and assigning different styles based on screen-size... but thats old way
is there any new way to do it
pl guide

thanks a lot
ts84zsAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Raymond van den BedumCommented:
Hi,

You can use media queries for that.
@media (max-width:500px){
    input{
         width: 100px;
    }
}

@media (max-width:1024px){
    input{
         width: 200px;
    }
}

Open in new window


Better is to use a responsive layout were all elements are configured to use an % of the available screen width.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Maidine FouadEngineerCommented:
ts84zsAuthor Commented:
thanks a lot Raymond van den Bedum can you please give me example of responsive layout

i am concerned @ text size, font size etc too along with div size etc ..  

pl guide

thanks a lot
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Brandon LyonSenior Frontend DeveloperCommented:
You can also specify units of measurement which are relative to the browser size, such as vh, vw, and vmin. CSS Tricks has a quick article about it,
https://css-tricks.com/viewport-sized-typography/
ts84zsAuthor Commented:
thanks a lot...
does it work on all browsers especially IE, chrome firefox, safari
Brandon LyonSenior Frontend DeveloperCommented:
If you're ever wondering what browsers something works in, you can look at the Can I Use site, http://caniuse.com/. vh, vw, vmin are supported as far back as IE9. Media query support also goes back that far.
ts84zsAuthor Commented:
OK thanks a lot i am looking into it....
Does it make the styles look same for different monitor sizes and resolutions  
I am not concerned @ mobile devices etc... just desktop's monitors sizes..  

pl guide thanks a lot
Brandon LyonSenior Frontend DeveloperCommented:
Most CSS technology does not differentiate between mobile or desktop. It's all numbers based on screen size. Viewport units of measurement such as vh, vw, and vmin scale automatically depending on the browser size.
ts84zsAuthor Commented:
ok thanks a lot... i am looking into it...
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.