Responsive font-size-CodePudding

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

CodePudding user response：

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 */ }

CodePudding user response：

It sounds like you are using the vw (viewport width) unit to set the font size of your text, which causes the text to become smaller as the viewport width becomes smaller (e.g. on mobile devices). One solution to this problem is to use media queries to apply different styles based on the width of the viewport.

For example, you could use a media query to set the font size to a larger/smaller value when the viewport width is below a certain threshold:

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

@media (max-width: 600px) {
  .#### {
    font-size: 2vw;
  }
}

This will cause the font size to decrease to 2vw when the viewport width is 600px or less. You can adjust the width threshold and the font size to find the values that work best for your design.

for more detail you can go https://www.w3schools.com/css/css_rwd_mediaqueries.asp