我是一名学习 html/css 的学生，我在创建第一个网站时遇到了问题。我在配置页面时遇到了很多困难，因此它是流动的而不是固定的。我配置了一个框、图像和一些文本，因此它们在页面上是绝对的，但我无法使页面本身流畅以适合(并且不会太大)浏览器。 这是 css/html :
body {
background-color: white;
}
.square {
position: absolute;
left: 0px;
top: 0px;
box-sizing: border-box;
background-color: rgb(49, 184, 184);
width: 2023px;
height: 842px;
}
.image {
position: absolute;
left: 588px;
top: 41px;
width: 1376px;
height: 927px;
}
.con {
position: absolute;
font-size: 200px;
color: white;
width: 271px;
height: 209px;
left: 293px;
top: 106px;
}
.view {
position: absolute;
box-sizing: border-box;
border-width: 1px;
border-style: solid;
background-color: rgba(0, 103, 103, 0.7);
border-color: transparent;
font-size: 200px;
color: white;
left: 588px;
top: 104px;
width: 396px;
height: 212px;
}
html,
body,
square,
image,
con,
view {
display: block
}<!DOCTYPE html>
<html lang="en">
<head>
<title>ConView</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="square"></div>
<img src="indeximage.jpg" class="image">
<p class="con">con</p>
<p class="view">view</p>
</body>
</html>最佳答案
上述方法的主要问题是分配给页面上不同元素的固定宽度。在这方面，媒体查询将是您最好的 friend 。它让你知道设备尺寸和不同的样式可以实现到不同的设备尺寸约束。在这种特殊情况下，您可以将浏览器尺寸设置为正方形的宽度，而不是指定固定宽度。 Media Query
关于html - 无法使我的网页适合屏幕(流畅)，而是太大而不适合水平滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56641294/