html宽度960设置响应式

如果您是一名网站开发者，那么您一定已经很熟悉 HTML 了。那么，在您的网站中，是否使用了宽度为 960px 的布局呢？如果是，您是否考虑过为您的网站添加响应式布局呢？今天，我们就来讨论一下如何使用 HTML 来设置响应式布局。

首先，我们需要在 HTML 的 head 标签中添加以下代码：

meta name="viewport" content="width=device-width, initial-scale=1">

这行代码中的 viewport 属性告诉浏览器，网站应该根据用户设备的宽度来调整布局，而不是按照固定的 960px 布局。

接下来，我们需要用 CSS 来添加媒体查询，以此来指定当设备宽度在不同范围内时使用何种布局。

@media screen and (max-width: 480px) {
/* 在设备宽度小于等于 480px 时使用此布局 */body {
    width: 100%;
}
}
@media screen and (min-width: 481px) and (max-width: 768px) {
/* 在设备宽度大于 480px 且 小于等于 768px 时使用此布局 */body {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}
}
@media screen and (min-width: 769px) and (max-width: 960px) {
/* 在设备宽度大于 768px 且 小于等于 960px 时使用此布局 */body {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}
}
    

在这里，我们使用了三个 media query，每个 query 指定了不同设备宽度下的布局。我们通过 body 元素来定义宽度、边距等样式规则。在这里，我们将宽度设置为 100%，90%，以及左右边距各为 5%。

现在，当您的网站被打开时，它会根据手机、平板电脑等设备的宽度来动态调整布局，而不会使用固定的 960px 布局了。

在今天的讨论中，我们简单介绍了如何使用 HTML 和 CSS 来设置响应式布局。通过使用媒体查询，我们可以指定在不同设备宽度下使用不同的布局。开发响应式网站可以为您带来更好的用户体验，让您的网站更适应不同的设备。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！