Question

我在页面内有一个容器和墙纸。我想做的是调整容器和墙纸的大小，以适应任何设备的屏幕尺寸。

我设法使墙纸正常工作，但是容器对我而言无效。我在做什么错了？

这是我的代码：

html,body{height:100%}
#left-link {
position: fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:99;
width:auto;
height:auto;
}

#container {
width:500px;
margin:0 auto;
margin-top:10px;
position:relative;
z-index:100;
}

body {
margin: 30px 0 0 0;
background: url(https://example.com/.jpg) no-repeat center center fixed;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}

Answer 1

您似乎已经对容器进行了硬编码，以在每个视口宽度处保持500px。

Answer 2

容器的大小设置为500px。如果您希望它具有响应能力，请将其设置为50%之类的百分比，该百分比将是页面的一半。

Answer 3

这可以通过对 never 进行更一般的解决方案来解决，该解决方案使用绝对单位表示所有内容。

诸如“ px”，“ in”，“ cm”之类的都是绝对单位，应避免使用。

当主要关注易读性（例如，读取图像中的某些字母）时，请使用相对单位：“ em”（或者，如果必须，则为“ rem”）；和“％”（或“ vh”和“ vw”）（主要是整体布局）。

您的示例具有“ 500px”，“ 10px”和“ 30px”。

相反，如果回答为“ 90％”，“。5em”和“ 4％”，则会更具响应性。

并按照您期望的方式将它们放入容器中

* { box-sizing: border-box; }

我做错了什么？ “响应页面”

3 个答案: