HTML5響應式設計是近年來Web設計開發中的一個重要趨勢，其以最佳化用戶體驗為目標，為不同設備、不同屏幕大小的用戶提供適當的閱讀體驗。 近年來，HTML5的出現為此類響應式設計提供了很好的支持，HTML5的新特性和元素均可以應用于實現響應式設計。下面我們看一應簡單的HTML5響應式設計代碼的例子。
<!DOCTYPE html> <html> <head> <title>HTML5響應式設計代碼示例</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <link href="style.css" rel="stylesheet"> </head> <body> <header> <h1>這是一個HTML5響應式網站</h1> <nav> <ul> <li><a href="#">首頁</a></li> <li><a href="#">關于我們</a></li> <li><a href="#">聯系我們</a></li> </ul> </nav> </header> <div class="content"> <section> <h2>歡迎來到我們的網站</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus ligula vitae purus facilisis imperdiet. Nulla facilisi. Vestibulum molestie tristique velit, a lacinia nibh placerat eget.</p> </section> <section class="news"> <h2>最新消息</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus ligula vitae purus facilisis imperdiet. Nulla facilisi. Vestibulum molestie tristique velit, a lacinia nibh placerat eget.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus ligula vitae purus facilisis imperdiet. Nulla facilisi. Vestibulum molestie tristique velit, a lacinia nibh placerat eget.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus ligula vitae purus facilisis imperdiet. Nulla facilisi. Vestibulum molestie tristique velit, a lacinia nibh placerat eget.<br> </p> </section> </div> <footer> <p>版權所有 ? 2021, HTML5響應式設計網站.</p> </footer> <script src="script.js"></script> </body> </html>
上面是一個簡單的HTML5響應式設計代碼示例，該代碼中包含了HTML5的一些基本元素和特性，如viewport、header、nav、section等。這些元素可幫助我們實現更加豐富、友好的用戶體驗。
上一篇minimal css
下一篇mysql5.7列名亂碼