如何在PC上显示3列，而在mobile>上只显示1列？

在PC上显示3列，而在移动设备上只显示1列的布局可以通过响应式设计来实现。响应式设计是一种能够根据设备屏幕大小和分辨率自动调整布局的技术。

实现这种布局可以使用CSS媒体查询。媒体查询是一种CSS功能，它允许根据设备的特性来应用不同的样式。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

/* 在移动设备上只显示1列 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>

在上述代码中，我们使用了一个包含三个列的<div>元素，并将它们浮动到左侧。每个列的宽度设置为33.33%，以便在PC上显示3列。在移动设备上，我们使用媒体查询将列的宽度设置为100%，以便在移动设备上只显示1列。

这只是一个简单的示例，实际应用中可能需要根据具体需求进行调整。对于更复杂的布局，可以使用CSS框架（如Bootstrap）或CSS网格系统来帮助实现响应式设计。

腾讯云提供了云服务器（CVM）和云函数（SCF）等产品，可以用于托管和运行网站和应用程序。您可以根据具体需求选择适合的产品。更多关于腾讯云产品的信息，请访问腾讯云官方网站：https://cloud.tencent.com/