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、然後我們試著縮小頁面，就可以發現會跟著縮小，這樣就可以製作不變的效果。
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、然後我們試著縮小頁面，就可以發現會跟著縮小，這樣就可以製作不變的效果。