Responsive font-size

Question

hi i'm new to webdev and i was tring to make my first full-responsive webpage but i had a problem that the text is extra large for the mobile version so i did set the width to #vw as i though that will fix it but it didn't go as i wanted as the text get alot smaller being unreadable + the page looks ugly with it can you guys help me please?

``

.#### {
font-size: 2.5vw;
font-weight: 700;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}

`` and i expected it to make the font size change with the width and it did but alittle bit over what i wanted and now with the mobile version the text is unreadable

Answer 1

You can use media queries.
Media query is a CSS technique introduced in CSS3.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.

So here you can use a condition that if device is mobile then use these css (i.e. css for smaller font)

#para {
  font-size: 40px;
}

// This CSS will run for mobile devices
@media only screen and (max-width: 300px) {
  #para {
    font-size: 10px;
  }
}

<p id="para">
  arches to delightful measures. Grim-visaged war hath smooth'd his wrinkled front; And now, instead of mounting barded steeds To fright the souls of fearful adversaries, He capers nimbly in a lady's chamber To the lascivious pleasing of a lute. But I,
  that am not shaped for sportive tricks, Nor made to court an amorous looking-glass; I, that am rudely stamp'd, and want love's majesty To strut before a wanton ambling nymph; I, that am rudely stamp'd, and want love's majesty To strut before a wanton
  ambling nymph; I, that am not shaped for sportive tricks, Nor made to court an amorous looking-glass; I, that am curtail'd of this fair proportion, of the ocean buried. Now are our brows bound with victorious wreaths; Our bruised arms hung up for monuments;
  Our stern alarums changed to merry meetings, Our dreadful marches to delightful measures. Grim-visaged war hath smooth'd his wrinkled front; And now, instead of mounting barded steeds To fright the souls of fearful adversarie
</p>

You can even add breakpoints for multiple screen widths, like say for device width >1000px use font 20px ,then from width 500 to 1000px use font 15px, then for width <500px use font 10px, etc, anything you may like.

Also I am providing you some breakpoints which I use, you can search for better maybe:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }