Question

开展一个小项目，这是一个实验性尝试进入一些中间的CSS。通过实践经验和所有学习。

我目前正在设计一个在屏幕上大致如此的简单网页：

两侧的黑色空间代表观看屏幕上的空白区域，通过背景颜色填充纯色。背景是一个设置为包含的图像，因此它与屏幕一起缩放而不进行裁剪，与中心对齐。没有滚动条，总是调整大小到屏幕。我想要的是背景中的其他方框，与背景图像，文本和所有内容按比例调整大小和比例，这样无论浏览器窗口如何调整大小，所有内容在相对于背景图像的位置方面看起来都相同。就像某种方式将各层分组在一起一样，如果可能的话？因为按钮需要完全正确，而未命名的方形物是一个半透明的png，它覆盖在背景图像的顶部。

到目前为止，这是我的代码，或者至少是相关部分。这只是背景图像和按钮。文字和其他图片看起来很奇怪，所以我确定我在那里做了一些完全错误的事情。

body {
    background: url("images/Background.png") no-repeat fixed center;
    background-size:contain;
    background-color:black;
}
#enter_button {
    background: rgba(26,0,0,0);
    position:fixed;
    transition: .5s ease;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-top: 0.5vw;
    padding-right: 1vw;
    padding-bottom: 0.5vw;
    padding-left: 1vw;
    border: 0px;
    border-radius: 10px;
    max-width: 100%;
    height:auto;
    color: rgba(26,0,0,1);
    font-size:5vw;
    text-align:center;
}
#enter_button:hover {
    transform: translate(-50%, -50%) scale(1.05);
    background: rgba(26,0,0,0.2);
}

这里是html正文部分。

<button id="enter_button">Enter</button>

如果我沿着背景图像的宽高比调整浏览器窗口的大小，按钮会正确缩放，但有时会在屏幕下消失。

我在考虑div标签，但我无法弄清楚如何。

我也听说vw和vh不是缩放到视口的好单位，而是使用this代替。那总是更好吗？

问题与此类似：Responsive DIV scaling within "background-size: contain" image 但是有一个纯粹的CSS解决方案吗？

Answer 1

你仍然需要使用@Quinn Langille针对特定用例指出的媒体查询，但假设你的宽高比大致相同，你应该没问题。要对具有“固定”位置的对象进行分组，您需要在该容器中使用relatively positioned容器和absolutely positioned个元素。

例如，这将允许您拥有多个可以使用相同属性的容器（例如：左：10％），但是属性只会相对于它们各自的容器。

https://jsfiddle.net/60w3043t/

<强> CSS：

.wrapper {
  position: relative;
  height: 100vh;
  width: 100%;
  background-color: blue;
  background-repeat: no-repeat;
  background-image: url('http://placehold.it/350x350');
  background-size: contain;
}

.flavortext {
  height: 100px;
  width: 100px;
  background-color: red;
  position: absolute;
  left: 10%;
  top: 10%;
}

input {
  position: absolute;
  top: 50%;
  left: 50%;
}

Answer 2

浏览器/设备兼容性是这方面的一个问题。因此，大众和其他一些单位不是最佳解决方案。

我一直在使用的是相对单位＆＃34; rem＆＃34;，因此您需要正确设置根元素，其余的将遵循。不过，我不能说自己实现这样的响应能力比使用提议的库更好。

在你的＆＃34;按钮消失＆＃34;行为，我怀疑原因是你的css样式有50％的值。通常情况下，您希望为响应式设计留下一些小缓冲区，因为您最终会得到宽度为1251的数字。其中50％可能会发挥作用。例如，尝试49％。

Answer 3

听起来你需要使用一些媒体查询。这些是样式表上的单独裁定，允许您在满足特定条件时修改元素或类的样式。例如，这可能在移动设备上看起来很糟糕

.sample-div {
  width:80%;
  font-size: 32px;
}

所以我可以进行查询，如下：

@media screen and (max-width 500px) {
  width: 100%;
  font-size: 24px;
}

因此，在分辨率低于500px宽的屏幕上将显示为此。您可以在此处了解有关它们的更多信息：

https://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

然而，虽然这可以解决您的问题，但根据您需要完成的工作，这可能会有点乏味。如果你想升级你的CSS技能，你可以使用像SASS或LESS这样的预处理器来创建一个自动执行此操作的函数。预处理器是快速编写样式的强大方法，允许您使用可在每个项目中使用的称为mixins的模块化代码。我使用与此类似的mixin来保持宽高比：https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/

如何实现响应式设计，在缩放时保持按钮和东西相对于背景图像的位置？

3 个答案: