使用HTML編寫網頁時,我們經常會遇到各種不同的網頁寬度問題。有些網頁希望網頁寬度與瀏覽器窗口的大小動態適應,這時候我們就需要使用HTML寬度自適應的代碼。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>寬度自適應網頁</title> <style> body { margin: 0; padding: 0; } .wrapper { width: 100%; max-width: 1200px; margin: 0 auto; background-color: #fff; } </style> </head> <body> <div class="wrapper"> <!-- 內容區域 --> </div> </body> </html>
上述代碼中,我們使用了CSS樣式表來設置網頁的寬度自適應。在body選擇器中,我們將margin和padding都設置為了0,這是為了保證網頁內容能夠完全顯示在瀏覽器窗口的范圍內。而在.wrapper選擇器中,我們使用了width: 100%來實現網頁寬度自適應,同時使用max-width: 1200px來設置最大寬度為1200像素,以保證在大屏幕設備上網頁不會過于放大。最后我們將.wrapper選擇器設置為margin: 0 auto,實現了網頁的居中排版。