css怎么加响应式布局 |jq 清空css

首先，大家需要设置布局的viewport。viewport是大家网页中可见区域的大小，它是大家进行响应式设计的基础。大家可以用meta标签来设置viewport：

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

上面的代码将viewport的宽度设置为设备的宽度，同时它还指定了viewport的初始缩放比例。这个meta标签应该放在HTML文档中的头部位置。

接下来，大家需要使用CSS媒体查询来设置不同宽度下的布局。例如，大家可以这样设置当屏幕宽度小于等于600像素时的布局：

@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

在上面的代码中，大家用@media查询来选择屏幕宽度小于等于600像素的设备，并将body元素的背景色设为浅蓝色。注意，这段CSS代码应该放在CSS文件的末尾，这样它才能覆盖前面的样式。

除了屏幕宽度，大家还可以使用其他的参数来调整布局，比如设备方向、分辨率等。例如，下面的代码将在竖屏模式下使用大字体：

@media screen and (orientation: portrait) {
body {
font-size: 2em;
}
}

以上就是使用CSS加响应式布局的基本步骤。通过设置viewport和媒体查询，大家可以轻松地创建不同设备、不同屏幕宽度下的不同布局，以实现完美的响应式设计效果。