css如何使頁面縮小后不變？

1、打開編輯器，創建一個HTML文檔，并且設立一下基本的架構。

2、我們用img標簽嵌入一張圖片，我們可以看出如果頁面縮小，圖片不會隨著縮小，這樣頁面就變形了。

3、然后創建CSS文檔，并且關聯現在的HTML文檔。利用LINK標簽。

4、* { text-align: center;} img { width: 800px; height: 800px;}為了方便顯示，我們先居中圖片，并且設置基礎的長寬。

5、@media only screen and (max-width: 600px) { img { width: 300px; height: 300px; }}

現在我們在CSS文件后面加上這行代碼，指的是頁面縮小到寬度為600px后，圖片的長寬也跟著縮小，這里要注意比例。

6、然后我們試著縮小頁面，就可以發現會跟著縮小，這樣就可以制作不變的效果。