在没有Bootstrap的情况下在文本内容上创建响应式div
在没有Bootstrap的情况下，在文本内容上创建响应式div，可以通过以下步骤实现：
- 创建HTML文件，并在文件中添加所需的文本内容。
- 在CSS样式表中定义一个容器div，并设置其样式属性，使其能够响应不同屏幕大小。
<!DOCTYPE html>
<html>
<head>
<title>响应式Div</title>
<style>
/* 定义容器div样式 */
.responsive-div {
width: 100%; /* 设置宽度为100%，占满父容器宽度 */
max-width: 800px; /* 设置最大宽度，以防止过度扩展 */
margin: 0 auto; /* 水平居中显示 */
background-color: lightblue;
padding: 20px;
box-sizing: border-box; /* 设置盒模型为border-box，使padding不增加元素宽度 */
border: 1px solid gray;
font-size: 16px;
}
/* 响应式样式 */
@media only screen and (max-width: 600px) {
.responsive-div {
font-size: 14px;
}
}
</style>
</head>
<body>
<!-- 创建响应式div -->
<div class="responsive-div">
<!-- 在此处添加你的文本内容 -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida eros orci, in convallis odio aliquet eget. Nulla interdum odio non elit convallis, in rhoncus metus ultrices. Nullam eleifend ipsum id urna tincidunt, at fringilla mauris malesuada. Vestibulum nec est nec justo varius ultrices sit amet et nunc. Maecenas pharetra dictum tortor ut porta. Suspendisse quis consequat elit. Duis cursus congue interdum. In nec ultrices neque. Sed tempor justo ipsum, nec vulputate nibh venenatis eget. Morbi at tempor lacus.
Nulla pulvinar bibendum justo eget varius. Suspendisse tincidunt vitae metus sit amet viverra. Nulla facilisi. Quisque malesuada tristique venenatis. Ut feugiat, tortor at tincidunt tristique, quam justo consequat tortor, et porta nisl sem id ligula. Curabitur sit amet semper nulla. Aliquam faucibus neque lacus, sit amet auctor mi faucibus sit amet. Fusce luctus accumsan tortor vel semper. Phasellus id metus nec tellus lobortis dignissim. Proin efficitur, odio at fermentum vestibulum, justo orci finibus ligula, vel interdum nisl elit ac libero. Nunc id tortor ex. Vivamus eu ligula ligula. In hac habitasse platea dictumst.
</div>
</body>
</html>在上述代码中，我们创建了一个具有.responsive-div类的容器div，设置了其宽度为100%，最大宽度为800px，背景颜色为lightblue，内边距为20px。使用@media查询，我们在窗口宽度小于等于600px时，将字体大小调整为14px，以适应较小的屏幕。
这样，无论在哪种屏幕大小下，都会自动根据屏幕宽度调整div的大小和文本的字体大小，从而实现响应式效果。
在腾讯云上，可以使用腾讯云的云服务器（CVM）产品来部署和运行这个HTML文件。您可以通过腾讯云的官方文档了解更多关于云服务器的信息：腾讯云云服务器
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
