CODEWITHSUNDEEP
htmlcssresponsive-designresponsive
Naxon
Naxon

Reputation: 1414

Using scaling instead of breakpoints on desktop

I'm building a responsive website which has 3 different dseigns: one for mobile, one for tablet and one for desktop. For each resolution I use a breakpoint, but on desktop there are many screen sizes and resolutions so I have to use many breakpoints inside the desktop breakpoint.

Is it possible to set the page to scale itself so it looks the same on every desktop resolution (of course the page would be smaller on smaller screens), and use the breakpoints only for mobile and tablet?

Thank's, Daniel.

Upvotes: 0

Views: 696

Answers (2)

user2486435
user2486435

Reputation:

Yes, it is possible. One way to do this is to set your page by default to have a fluid layout and use % for main column (and sidebars if any), and then to set breakpoints with media queries for your mobile break points and control the layout differently for each. For your default "desktop layout" you can set a max-width to restrain the fluid layout. Personally I would take a mobile first approach and style for mobile by default and then change for desktop at a specific breakpoint.

Upvotes: 0

Tom Durkin
Tom Durkin

Reputation: 99

When you are at your desktop breakpoint you could use percentage widths so that the website scales if a user changes the size of the screen.

e.g: 

.main-container {
  width: 80%
}

Upvotes: 0

Related Questions