I Need to Scale an Entire Website Down to 80%

Scale the whole website by 0.8 when in a certain width

You could do:

@media (max-width: 800px) {
    body: {
        zoom: .8;
    }
}

How can I scale down a website without changing every single font-size, image-size, button, etc

Generally, manipulating the browser zoom settings or scaling a page is not considered good practice. Even if it looks awesome on your end, it does not mean it will look as good to a customer. There are multiple window sizes and devices to take into consideration.

The recommended method is to make the appropriate changes to the layout and CSS.

However, I have added a hack below that will work for most browsers. I just want to make it clear that I do not recommend this approach.

html {
   zoom: 0.8;
   -moz-transform: scale(0.8);
   -webkit-transform: scale(0.8);
   transform: scale(0.8);
}

Making my site scale to resolution sizes in css

You're mixing relative and absolute measurements incorrectly. If you are beginners, I would recommend sticking to one model of measurements first and gradually learn how to use the others.

For example, the Stack Overflow is absolutely positioned; if you resize the browser window, nothing will resize. A relatively positioned webpage can adapt the content to the available window size. The JSFiddle site is relatively positioned; it always utilizes the entire window size.

Both model of measurements can produce a good websites, but to produce a successful website though, you have to be intimately familiar with both methods of positioning and how to mix them to produce various effects when used in the same page.

Many people consider absolute positioning to be easier to visualize for beginners; although it has its limitations if you want to create more advanced layouts that works well across widely different screen sizes.

If you want to start with absolute positioning, you first start by deciding a certain width for the overall page. Many people uses a fairly narrow number of pixels that have a large number of even divisibility like 960px or 800px. To make a simple absolutely positioned site, you need to:

1. Set position: absolute on most things.
2. Set any two of: top, bottom, or height.
3. Set any two of: left, right, or width.
4. Everything on the page should use the same measurement unit (e.g. px)

For example (edit on jsfiddle or full screen):

#hometext{
    font-family: "arial";
    font-size: 100%; 
    text-decoration: none;
    color: #585858;
    position: absolute;
    top: 80px; 
    left: 60px; 
    width: 335px;
    height: 60px;
    line-height: 20px; /* this ensure that 3 lines of text sums up to 3*20px=60px */
}

The drawback of absolutely positioned website is apparent if you try to zoom the site or if your users use a different window size (they'll either have lots of wasted space or have to scroll horizontally. With pure absolute positioning, the website essentially becomes like a static image.

A more modern best practice is to use floated positioning to produce a responsive or elastic website. For this, you need to understand how to float elements and the various layout algorithms. To produce an elastic website you'll need:

1. use percent unit for most things
2. utilize the margins and paddings judiciously
3. utilize the various layout algoritms

For example (edit in jsfiddle or fullscreen). Understanding the various layout algorithm admittedly can be quite difficult, but you will eventually get it naturally if you keep using it for various different layouts.

Zoom out to 80% in the browser, when logging to an application?

You're nearly there. Let's see your approach in action first:

html {  -moz-transform: scale(0.8, 0.8);  -ms-transform: scale(0.8);  -webkit-transform: scale(0.8);  transform: scale(0.8);}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

---

Related Topics