I found a helpful tutorial here:
https://bootstrapcreative.com/can-adjust-text-size-bootstrap-responsive-design
They recommended one approach where font-size be overridden based on the category of the window/screen size where the page is being displayed. I tried this approach in my own application and it gave me exactly the kind of flexibility that I wanted.
As a test, I used the following ridiculously large values for some commonly used HTML element types. The text displayed VERY large inside those elements, as expected.
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
a {font-size:3.5rem;} /*1rem = 16px*/
td {font-size:3.5rem;} /*1rem = 16px*/
p {font-size:3.5rem;} /*1rem = 16px*/
h1 {font-size:3.5rem;} /*1rem = 16px*/
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
a {font-size:5rem;} /*1rem = 16px*/
td {font-size:5rem;} /*1rem = 16px*/
p {font-size:5rem;} /*1rem = 16px*/
h1 {font-size:5rem;} /*1rem = 16px*/
}
It also works the other way with very smaller values like this:
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
a {font-size:0.5rem;} /*1rem = 16px*/
td {font-size:0.5rem;} /*1rem = 16px*/
p {font-size:0.5rem;} /*1rem = 16px*/
h1 {font-size:0.5rem;} /*1rem = 16px*/
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
a {font-size:0.75rem;} /*1rem = 16px*/
td {font-size:0.75rem;} /*1rem = 16px*/
p {font-size:0.75rem;} /*1rem = 16px*/
h1 {font-size:0.75rem;} /*1rem = 16px*/
}
I love how the font size will automatically adjust itself on my PC if I shrink the browser window down. Of course, it only works properly if one provides sane values for the various window sizes.
I was able to get this working without modifying any of the files that were included in the Bootstrap template bundle. I put the sample CSS above into a file named my-custom-styles.css, and I put that file into the same directory as the simple-sidebar.css file that comes with the Bootstrap template.
Finally, my HTML template needs this inside the <head> block:
<!-- Bootstrap core CSS -->
<link rel="stylesheet"
th:href="@{/vendor/bootstrap/css/bootstrap.min.css}"
href="../../static/vendor/bootstrap/css/bootstrap.min.css" />
<!-- Custom styles for this Boostrap template -->
<link rel="stylesheet"
th:href="@{/css/simple-sidebar.css}"
href="../../static/css/simple-sidebar.css" />
<!-- Custom styles for my application that override the Bootstrap template -->
<link rel="stylesheet"
th:href="@{/css/my-custom-styles.css}"
href="../static/css/my-custom-styles.css" />
NOTE: The th:href attributes are used by the Thymeleaf template library and are not included in the final HTML that is sent to the client browser.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
