javascript - I am trying to make a responsive text, but it's size is fixed no matter how big the screen is - Stack Overf

admin管理员组

文章数量:1400652

On the emulator the text looks OK, but on my phone it is to big for the line

<label text="just some regular text" class="text"> </label>
.text{
font-size: 20%;
}

On the emulator the text looks OK, but on my phone it is to big for the line

<label text="just some regular text" class="text"> </label>
.text{
font-size: 20%;
}

• javascript
• css
• angular
• typescript
• nativescript

Share Improve this question Follow edited Jan 8, 2020 at 20:58 ranieribt 1,30611 gold badge1515 silver badges3333 bronze badges asked Jan 8, 2020 at 19:48 oded bartovoded bartov 43111 gold badge44 silver badges1111 bronze badges 1

• {N} doesn't support % for font size, you may calculate the font size you want based on screen size and inject CSS on application level at run time. – Manoj Commented Jan 9, 2020 at 3:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Using a % value for the font-size property does not make the size proportional to the viewport size. It merely sizes the text relative to the parent element's font size.

For example:

body {
  font-size: 32px;
}

.text {
  font-size: 50%;
}

<div class="text">This text is 50% of 32px = 16px;</div>

To make the font-size responsive there are a few options:

1. Use media queries to define font sizes for various breakpoints
2. Use viewport percentage units to make the font sizes scale with the viewport size

1. Media Queries

.text {
  font-size: 16px;
}

@media screen and (min-width: 600px) {
  .text {
    font-size: 24px;
  }
}

<div class="text">This font size is 16px when the viewport is between 320px and 599px, and 24px when the viewport is 600px or larger.</div>

2. Viewport Percentage Units

If you want the font size to be proportional to viewport size you can use any of the viewport percentage units:

• vw - A percentage of the full viewport width
• vh - A percentage of the full viewport height
• vmin - A percentage of the viewport width or height, whichever is smaller
• vmax - A percentage of the viewport width or height, whichever is larger

For example:

  .text {
    font-size: 5vw;
  }

would mean the font-size is 5% the width of the viewport. If the viewport is 1200px the font-size would be 60px; If the viewport is smaller, so 600px the font-size would be 30px.

There are some creative and interesting ways to use these viewport percentage units along with calc() to create responsive font sizes with a minimum size. For example:

.text {
  font-size: calc(16px + 2vh);
}

<div class="text">This text 16px + 2% of the viewport width.</div>

CSS Tricks has a few great articles on other ways to use the viewport percentage units.

本文标签：