CSS3根据不同的PC屏幕（浏览器）分辨率显示网站相同内容放大或者缩小

CSS3根据不同的PC屏幕（浏览器）分辨率显示网站相同内容放大或者缩小

举例：我们一个网站，网页需要在两款不同的电脑，分辨率不同的电脑上显示，一个大分辨率是1920x1080，一个是小分辨率1366x768 可能我们做的页面是按照大分辨率做的，到小分辨率上显示会有出入，页面垮掉，这时我们就需要在小分辨率上更改内容的显示，将整个页面或者页面的某个部分内容在小分辨率上单独放大或者缩小

使用@media 和zoom属性

例如我们想在小分辨率1366x768缩小内容为在大分辨率1920x1080 90%效果展示 。在style标签中 我们可以这样做

/* 当屏幕分辨率不超过1400px的时候将body内容缩放成90% */
		@media screen and (max-width: 1400px) { 
		.bodys{
			zoom: 90%;
			} 	
		}

这样当我们屏幕不超过1400px的时候就会将整个页面进行缩放成90%,当超过了1400px的时候会按原来的100%比例，当然你如果有需要可以多设置几个规则。

.bodys是在 body标签上加的class，使得我们整个页面都按照这个比例进行缩放。当然你也可以在页面的局部，某个div这个做，我们还可以在.bodys里面更改样式，使得在不同分辨率的屏幕上展示不同的效果。