css - 如何使 CSS 组合可伸缩

Question

经过一些努力，我终于成功地制作了一个复合 CSS，如这个 fiddle 所示:

https://jsfiddle.net/boywithk9/9L5o0rrf/14/

div.tile-square {
  position: relative;
  background-image: url("http://surfcityapps.com/img/bundle-tiles/background.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 300px;
  min-width: 300px;
  z-index: 1;
}
.tile-square-icon {
  position: absolute;
  z-index: 2;
  height: 160px;
  width: 160px;
  margin-left: 70px;
  margin-right: 70px;
  top: 17px;
  display: block !important;
}
div img.tile-square-name {
  position: absolute;
  z-index: 3;
  height: 40px;
  top: 215px;
  display: block !important;
}
.tile-square-bundle {
  position: absolute;
  z-index: 4;
  height: 15px;
  width: 130px;
  margin-left: 85px;
  margin-right: 85px;
  top: 265px;
  display: block !important;
}
.tile-square-shadow {
  -webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .2));
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .2));
}

<div style="width: 209px">
  <p>
    <a href="http://surfcityapps.com/our-top-ten-apps-bundle/">
      <div class="tile-square">
        <img class="tile-square-icon tile-square-shadow" src="http://surfcityapps.com/img/bundle-tiles/icon-top10.svg">
        <img class="tile-square-name tile-square-shadow" style="width: 220px; margin-left: 40px; margin-right: 40px;" src="http://surfcityapps.com/img/bundle-tiles/name-top10.svg">
        <img class="tile-square-bundle tile-square-shadow" src="http://surfcityapps.com/img/bundle-tiles/bundle.svg">
        <img class="tile-square-OFFsale" src="http://surfcityapps.com/img/bundle-tiles/badge-onsale.png">
      </div>
    </a>
  </p>
</div>

但是，我还需要能够缩小它的大小(209 像素 x 209 像素，以及 300 像素 x 300 像素)。

我能够让图像居中的唯一方法是指定容器和组件大小的方法。

现在我意识到这似乎不可能缩小整个事情。

有什么建议吗？

我是否必须根据其他宽度创建第二组样式/html？

Answer 1

不，永远不要为特定尺寸创建特定的 CSS 样式集。

相反，请始终尝试使用相对 尺寸(使用百分比)。

例如:代替width: 150px , 让它成为 width: 39% .

通过这种方式，无论它是什么(即使窗口已调整大小)，您都会得到宽度将是其容器宽度的 39%。

我向您推荐的其他良好做法:

• 总是喜欢简单的解决方案而不是复杂的解决方案。
• 始终将所有 CSS 样式放在 CSS 表中，而不是放在 style 中HTML 属性。这样，您就可以将所有样式存储在一个地方，而不是一堆杂乱无章的 CSS 和 HTML 声明。
• 明智地区分 id 选择器 的类选择器:类选择器应用于命名一组将适用于页面中多个元素的规则。相反，一个 id 选择器将仅用于一个元素。
• 尽量不要在不同的选择器中重复相同的样式。相反，声明一个类并使其对必要的元素通用(我注意到您已经遵守了这条规则。恭喜)。
• 尽量不要使用绝对定位， z-index 也不 important! 限定词。一个好的设计应该不需要它们(当然，如果它本质上并不复杂的话)。

根据这些建议，我给你我的建议:

HTML:

我已经放下了 P元素，因为显然什么都不做，我添加了第二个 <div>为了证明相同的 CSS 规则适用于不同的元素，我给出了不同的 id每个 <div> .

<div id="x1">
        <a href="http://surfcityapps.com/our-top-ten-apps-bundle/">
            <div class="tile-square">
                <img class="tile-square-icon tile-square-shadow" src="http://surfcityapps.com/img/bundle-tiles/icon-top10.svg">
                <img class="tile-square-name tile-square-shadow" src="http://surfcityapps.com/img/bundle-tiles/name-top10.svg">
                <img class="tile-square-bundle tile-square-shadow" src="http://surfcityapps.com/img/bundle-tiles/bundle.svg">
                <img class="tile-square-OFFsale" src="http://surfcityapps.com/img/bundle-tiles/badge-onsale.png">
            </div>
        </a>
</div>
<div id="x2">
        <a href="http://surfcityapps.com/our-top-ten-apps-bundle/">
            <div class="tile-square">
                <img class="tile-square-icon tile-square-shadow" src="http://surfcityapps.com/img/bundle-tiles/icon-top10.svg">
                <img class="tile-square-name tile-square-shadow" src="http://surfcityapps.com/img/bundle-tiles/name-top10.svg">
                <img class="tile-square-bundle tile-square-shadow" src="http://surfcityapps.com/img/bundle-tiles/bundle.svg">
                <img class="tile-square-OFFsale" src="http://surfcityapps.com/img/bundle-tiles/badge-onsale.png">
            </div>
        </a>
</div>

CSS:

div#x1 {
    width: 20%; 
    height: 20%;
    border: solid 1px;
}

div#x2 {
    width: 53%; 
    height: 53%;
    border: solid 1px;
}

div.tile-square {
    background-image: url("http://surfcityapps.com/img/bundle-tiles/background.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    height: 100%;
    width: 100%;
}

img.tile-square-shadow {
    -webkit-filter: drop-shadow( 1px 1px 1px rgba(0,0,0,.2) );
    filter: drop-shadow( 1px 1px 1px rgba(0,0,0,.2) );
}

img.tile-square-icon {
    margin-top: 7%;
    width: 50%;
    margin-left: 25%;
}

img.tile-square-name {
    margin-top: 10%;
    width: 80%;
    margin-left: 10%;
}

img.tile-square-bundle {
    margin-top: 2%;
    margin-bottom: 2%;
    width: 35%;
    margin-left: 32%;
}

img.tile-square-OFFsale {
    position: absolute;
    visibility: hidden;
    z-index: 5;
    width: 60%;
}

如您所见，我已将所有绝对尺寸转换为相对尺寸。

其实连例子的宽度都是<div id="x1">和 <div id="x2">设置为百分比；您可以修改它们(甚至设置左边距)以确保相关方面保持不变。

类选择器将由 image 元素共享，而 id选择器仅适用于容器 <div>元素。