0

i am looking to reduce font size automatically (percentage) in CSS depend on the size of the screen.

the purpose of the this to control size of the font on the usage of the platform (PC or Mobile)

here is my normal css

.pagetitle, .menutitle{
    font:Verdana, Geneva, sans-serif;
    font-size:2em;
    line-height:40px;
    height:40px;
    display:block;
    margin-left:15px;   
 }

thanks.

Lumi Lu
  • 3,289
  • 1
  • 11
  • 21
Reel
  • 83
  • 2
  • 15

3 Answers3

1

If you want to discriminate between mobile and PC, you can use CSS @media queries, like:

@media all and (max-width: 767px) {
   // CSS rules for viewport that is narrower than 780px
}

For example:

@media all and (max-width: 767px) {
    .pagetitle, .menutitle {
        font-size: 12px;
    }
}

However, CSS media queries should not be solely determined by device dimensions alone — sometimes it makes more sense to tailor the break points based on your sire's content or design, in which you select arbitrary width(s) where the layout switch occurs.

You can try using viewport units: vh, vw, vmin and vmax. They are declared as numerical values although they technically represent percentage of the viewport measurement they are referring to.

For example, if your screen is 1600*768 in resolution, using a font size of:

  • 5vw will give you 80px—5% of the viewport width
  • 5vh will give you 38.4px (likely rounded to 38px by rendering)—5% of the viewport height
  • 5vmax will give you 80px—5% of the longest dimension (in this case, horizontal measurement of 1600px)
  • 5vmin will give you 38.4px—5% of the shorter dimension (in this case, vertical measurement of 768px)

Note that the last two units are sensitive to device/viewport orientation :)

Terry
  • 63,248
  • 15
  • 96
  • 118
1

Set up media queries (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries) of different target resolutions. Then, set explicit font-sizes within a body { } tag within each media query.

Ryan Nigro
  • 4,389
  • 2
  • 17
  • 23
0

the text-size-adjust CSS property allows web developers to control if and how the text-inflating algorithm is applied to the textual content of the element it is applied to. This basically means that the text will adjust based on screen width. the below code may be helpful:

Formal syntax: none | auto | <percentage>

text-size-adjust: none               /* text is never inflated */
text-size-adjust: auto               /* text may be inflated */
text-size-adjust: <percentage>       /* text may be inflated of this exact proportion */
text-size-adjust: inherit

ound more info about this on the following site : https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

mkCode
  • 46
  • 1
  • 8