CODEWITHSUNDEEP
css
user2961861
user2961861

Reputation:

CSS - how to code for a specific resolution

I am designing html/css interface for a 1920x1080 touchscreen. It will always be that resolution, never changing. Should I set width and height to those dimensions and code from there, or should I code in percents at whatever size resolution I'm at and then allow it to adjust to a bigger screen? I am looking for the solution what poses the least roadblocks.

Upvotes: 0

Views: 3218

Answers (2)

cmpreshn
cmpreshn

Reputation: 162

Never assume that anything will always be the same resolution. Regardless of what you're coding for now, there will be next generation devices, and they will be different. So unless your project has a very short lifetime (maybe a temporary web site), my recommendation is to code to current standards. Also, in my experience, coding in ems and percentages is usually faster than coding in individual pixels of a project. If your touchscreen is 1920x1080, and you set a body width of 100%, there is functionally no difference between that value, and setting the body width to 1920px. However, using the percentage approach, you retain more flexibility should the device resolution or browser behavior change.

Upvotes: 1

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

The best solution (atleast for me) has been described by you as the usage of percentage values.

So if you use percentage values then the code will take care of its content's size in any screen size. But you might want to use this:

@media only screen and (max-width: 1900) {
   // css properties here..
}

But the media query will take alot of code lines to make the site able to render itself. So that is why using % is my preference.

Upvotes: 0

Related Questions