網頁自適應在日常開發中越來越重要，特別是隨著移動端設備的興起，我們需要使用HTML5來實現網頁自適應。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5網頁自適應</title>
<style>
/*代碼中的CSS樣式可以根據實際情況進行修改*/
@media screen and (max-width: 768px) {
/*在屏幕寬度小于等于768px時，應用以下樣式*/
body {
font-size: 14px;
}
.container {
width: auto;
margin: 0;
}
}
@media screen and (min-width: 769px) {
/*在屏幕寬度大于等于769px時，應用以下樣式*/
body {
font-size: 16px;
}
.container {
width: 960px;
margin: 0 auto;
}
}
</style>
</head>
<body>
<div class="container">
<p>這是一個自適應網頁的例子。</p>
</div>
</body>
</html>在上面的代碼中，我們使用了HTML5中的viewport元標簽來設置網頁的寬度，并在CSS樣式中使用了@media查詢來根據屏幕寬度不同應用不同的樣式。
以上是一個比較簡單的HTML5自適應網頁的例子，當然在實際應用中可能需要針對不同設備適配不同的樣式，還需要進行更多的優化和調整。總之，通過使用HTML5可以實現網頁自適應，讓我們的網頁在不同的設備上都能夠有更好的顯示效果。
上一篇js鼠標懸停修改css
下一篇html5網頁的骨架代碼