Solution for front-end browser font size less than 12px

Preface

When I was working on a project recently, the font size of the UI design was 10px. When I looked at the renderings, I found that the font size was still quite large. When I changed it to 12px, the font size was still the same. When I changed it to 14px, the font size became larger. I found a pattern and realized that in order to let users see the font clearly, the browser set the minimum setting to 12px. what to do? Design is 10px?

The final effect diagram is as follows:

Rendering

Rendering

Rendering

When I searched Baidu, the experts said that using transform: scale(0.5) can meet the requirement. However, when I used it, I found that the width and height of the entire div were scaled, which did not meet the requirement.

Conversely, you can put the red dot and the text on two divs. The red dot controls the width and height, and the font can be reduced by using transform: scale to meet the needs.

The specific implementation code is as follows:

<div v-if="cartNum>=1" class="cartData">
     <div class="Num" v-if="cartNum>=1&&cartNum<=99">{{cartNum}}</div>
     <div class="Num" v-else-if="cartNum>99">99+</div>
</div>

CSS part:

.cartData{
    height: .75rem;
    min-width: .75rem;
    border-radius: .375rem;
    background: red;
    color: white;
    text-align: center;
    line-height: .75rem;
  }
  .Num{
    font-size: 20px;
    -webkit-transform: scale(0.5);
    }

The font size above is 14*0.8 = 11.2px, which can be adjusted according to needs.

Writing it this way alone will not be compatible with IE and FF, so here is another compatible way to write it:

.Num{
    font-size: 14px;
    -webkit-transform: scale(0.8);
 }
.Numsize-font{
  font-size: 14*0.8px;
}

Notice:

transform:scale() attribute can only scale elements that can define width and height, but inline elements do not have width and height. We can add a display:inline-block;

Summarize

The above is the full content of this article. I hope that the content of this article will have certain reference learning value for your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support for 123WORDPRESS.COM.