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裏面更改樣式,使得在不同分辨率的屏幕上展示不同的效果。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章