Skip to content

Body Zoom

edited June 13 in CSS

I made a recent discovery. Using the zoom attribute inside the body is pretty handy when it comes to desktop screens. 4K resolution is becoming more common and adjusting widths will continue to get painful if you customize individual widths. An easy solution is to standardize a responsive layout that is 1280px wide - 720p.

Once your layout/template is responsive, go ahead and slap the zoom attribute inside the body with a percentage.

body{
	zoom:200%;
}

Play around with zoom percentages to fit your layout needs. Don't forget to add a screen max for smaller screens so it resets the zoom level back to normal.

@media screen and (max-width: 1280px){
	body{
		zoom:100%;
	}
}
Sign In or Register to comment.