Question

当我在移动设备上看到网页时，西服符号的体积比台式机的符号大，导致我所有的html-css卡看起来都很奇怪

卡片是CSS-HTML，而不是图像。对于台式机浏览器来说，它们看上去一直很好，但是在移动设备上，它们确实很奇怪，并且西装符号无法像等级那样不断扩展。页面：http://bridgegod.com/framedprob.php?probid=776，这是移动版本的外观：https://imgur.com/a/VwuZhgv，这是台式机：https://imgur.com/a/FiHMPIR

的外观

.card{
    background-color: white;
    width:  2.65em;
    height: 4.10em;
    border-radius: 0.20em;
    border-color: #808080 #000000 #000000 #808080;
    border-width: 1px;
    border-style: solid;
    color: #000000;
    font-size: 60px;
    position: relative;
    display: inline-block;
        transition: opacity 3s ease-out;
    -moz-transition: opacity 3s ease-out;
    -webkit-transition: opacity 3s ease-out;
    -o-transition: opacity 3s ease-out;
}
.rango, .rango_op, .rango_op_fat {
  font-size: 50%;
  font-weight: 800;
  font-family:Arial,Helvetica,sans-serif;
  position: absolute;
}
.rango{
  width: 1.05em; text-align: center;
  left: -0.05em;
  top:  0.15em;
}
.smark{
    font-size : 60%;
  width: 0.6em; text-align: center;
  left: 0.10em;
  top:  0.8em;
   position: absolute;
}

.spotA1 { position: absolute; left: 0.35em; top: 0.07em; }
.spotA2 { position: absolute; left: 0.35em; top: 0.97em; }
.spotA3 { position: absolute; left: 0.35em; top: 1.41em; }
.spotA4 { position: absolute; left: 0.35em; top: 1.97em; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
.spotA5 { position: absolute; left: 0.35em; top: 2.87em; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
.spotB1 { position: absolute; left: 0.98em; top: 0.07em; }
.spotB2 { position: absolute; left: 0.98em; top: 0.67em; }
.spotB3 { position: absolute; left: 0.98em; top: 1.41em; }
.spotB4 { position: absolute; left: 0.98em; top: 2.27em; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
.spotB5 { position: absolute; left: 0.98em; top: 2.87em; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
.spotC1 { position: absolute; left: 1.61em; top: 0.07em; }
.spotC2 { position: absolute; left: 1.61em; top: 0.97em; }
.spotC3 { position: absolute; left: 1.61em; top: 1.53em; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
.spotC4 { position: absolute; left: 1.61em; top: 1.97em; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
.spotC5 { position: absolute; left: 1.61em; top: 2.87em; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}


.smark_op {
    position: absolute;
    font-size: 60%;
  width: 1em; text-align: left;
  right: 0.10em;
  bottom:  0.9em;
  -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);
}
.rango_op {
  width: 1.05em; text-align: center;
  right: -0.05em;
  bottom:  0.15em;
  -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);
}

<div class="card" id="card_c2">
  <div class="dorso"></div>
  <div class="front suit_green">
    <div class="rango">2</div>
    <div class="smark">&clubs;</div>
    <div class="smark_op">&clubs;</div>
    <div class="rango_op">2<br>&nbsp;</div>
    <div class="spotB1 spot">&clubs;</div>
    <div class="spotB5 spot">&clubs;</div>
  </div>
</div>

西装符号在移动浏览器上的尺寸更大

0 个答案: