Question

今天出现了一个想法，我想在开始使用之前了解其他人的意见。使用em几乎所有属性（paddings，font-size，width，height ...）并在其上控制它们的优缺点是什么通过在最近的父级上设置字体大小来阻止级别？我在下面附上一个例子。感谢。

.steps {
  border: 1px solid #000;
  font-size: 16px; 
}

.steps__item {
  display: inline-block;
  height: 6.375em;
  min-width: 8.4375em;
  margin: 0.375em 1.4375em;
  position: relative;
  text-align: center;
  border: 3px solid transparent;
}
.steps__item--selected {
  border-color: #70b631;
}
.steps__item:hover {
  border-color: #70b631;
}
.steps__wrapper {
  display: inline-block;
  position: relative;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  
  
}

.steps__wrapper img {
    width:3.75em;
    }

.steps__description {
  display: block;
  font-size: 0.8125em;
  font-weight: 600;
  color: #000;
  padding: 0.625em 0.625em 0 0.625em;
}

<section class="steps">
  <a href="javascript:void(0)" class="steps__item steps__item--selected ">
    <div class="steps__wrapper">
      <img src="https://dummyimage.com/60x45/ad6bad/fff&text=+" alt="">
      <span class="steps__description">1. Produkt hinzufügen</span>
    </div>
    <!-- end steps__wrapper -->
  </a>
  <!-- end steps__item -->

  <a href="javascript:void(0)" class="steps__item ">
    <div class="steps__wrapper">
      <img src="https://dummyimage.com/60x45/ad6bad/fff&text=+" alt="tshirt image">
      <span class="steps__description">2. Druck hinzufügen</span>
    </div>
    <!-- end steps__wrapper -->
  </a>
  <!-- end steps__item -->

  <a href="javascript:void(0)" class="steps__item">
    <div class="steps__wrapper">
      <img src="https://dummyimage.com/60x45/ad6bad/fff&text=+" alt="email icon">
      <span class="steps__description">3. Gratis Angebot direkt erhalten</span>
    </div>
    <!-- end steps__wrapper -->
  </a>
  <!-- end steps__item -->
</section>
<!-- end steps -->

Answer 1

这是选择单位的绝对错误方法。每个单元都是出于某种原因而生成的：em/rem取决于用户首选项，vh/vw相对于视口大小等等。统一使用过的单位毫无意义，因为您应该为手头的设置选择最合适的单位。因此，对于字体大小使用em/rem是个好主意，但它不能用于设置容器，该容器应该是其父级的三分之二宽。因此百分比很好。响应式设计不是由某个单元组成的，它首先由设计构成，并且关于事物应该如何在不同尺寸上的良好概念。在将其变为现实的同时，您必须决定使用哪个单位，而不是“一个所有真相”。

<强>更新

值得一提的是，我之所以如此：我曾经，当我第一次发现rem时，开始使用sass函数将每个和所有内容转换为rem，所以我有一个px2em($px)方法并使用它转换每个可能的值。由于没有太多的要求应该用百分比解决，整个事情变得很好。但我遇到了几个问题，这使得它变得不必要复杂，甚至无用。当涉及到细线边界时，一个主要问题与舍入问题有关：假设1em等于16px（如果用户未更改此值），则宽度为1px的边框变为0,0625rem反过来导致浏览器之间的渲染宽度不同，切换回px只是解决了这个问题。总而言之，我获得了一个绑定到rem的布局，相对于某个基础的固定单位是什么，因此更改基础只会导致缩放。在完成所有的弯路后，我最终得到了一个非响应页面，可以通过更改默认字体大小来缩放，而不是仅使用ctrl+或其触摸手势对应。

简而言之：单位是工具箱中的工具，拒绝某个工具，或者偏向于另一个工具，与在螺钉上使用锤子一样有用。即使这是可能的，如果可用的话，使用螺丝刀也更有意义。

Answer 2

对于所有尺寸，您绝对应该em使用完全响应式设计。

当然，可能会有一些例外情况需要固定像素或百分比大小，因此请留出一些灵活的空间。

不要忘记还有rem单元，它基于页面上的默认根字体大小（默认情况下通常为16px），而不是父元素。当你有嵌套的块时，你有时想要使用它 - 字体大小可以很快远离你，变得非常大或非常小。

与em的响应维度

2 个答案: