html5响应式布局怎么写?HTML5的响应式布局可以通过CSS3中的媒体查询(Media Query)来实现。媒体查询可以根据设备屏幕的宽度、高度、分辨率等参数来加载不同的样式。
下面是一个简单的HTML5响应式布局示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive
Layout</title>
<style>
/* 公共样式 */
body
{
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width:
1200px;
margin: 0 auto;
}
/* 响应式样式
*/
@media screen and (min-width: 768px) {
/*
当屏幕宽度大于等于768px时，将.container的宽度设置为80% */
.container
{
width: 80%;
}
}
@media
screen and (min-width: 992px) {
/*
当屏幕宽度大于等于992px时，将.container的宽度设置为70% */
.container
{
width: 70%;
}
}
</style>
</head>
<body>
<div
class="container">
<!-- 页面内容 -->
</div>
</body>
</html>
在上述示例代码中，定义了一个容器元素`.container`，并设置其最大宽度为1200px和居中对齐。接着使用媒体查询设置当屏幕宽度大于等于768px时，将`.container`的宽度设置为80%；当屏幕宽度大于等于992px时，将`.container`的宽度设置为70%。
通过媒体查询和CSS样式的配合，我们可以在不同设备上实现适应性的布局。
