So, im about halfway through the 5 projects in the Responsive Web Design FCC course and one of the biggest difficulties im having is making my web pages responsive/making them compatible at smaller view port sizes, a big part of this is I just don’t understand how to make text work at smaller view port sizes. Other than manually shrinking the page until the text is too big for its containeror wraps or bleeds off of the view port and then manually setting media queries that make my text a little smaller every time that happens so it always looks an appropriate size in its container, is there any another more simple way im unaware of to make text just scale along with its parent containers size being that I can just set the parent container to a % value and it will shrink/grow responsively?
I sort of have a feeling this might not have a simple answer so if there is a course/article that explains what im talking about well that would also be great.
The things you describe can be possibly a problem only for very large text like 60-80px heading for example. You really don’t want to tie font size to box width as this can have unpleasing effects and normally involves a lot of unstable calculations. The normal convention is to design for 3 most popular screens among Mobile, Tablet and Desktop and set base font size (the one in the root) to have 45 - 75 characters in one line and then set all other font-sizes relative to base font-size (in rem) and all spacing relative to current font-size of the element (in em)
Hi, if I understand you well, yes there is method for that based on using vh and vw units. Those units are relative to viewport size which makes possible to set font-size relatively to viewport size.
