Currently, I am utilizing Angular 8 alongside Bootstrap v4.4.1 (located in package.json under "@ng-bootstrap/ng-bootstrap": "^5.2.1"). The specific requirements for my project are as follows:
- Ensure support for responsive design (achieved through the use of bootstrap)
- Guarantee that all elements are consistently rendered across different browsers
Initially, I believed that the second requirement would be addressed by bootstrap as well. However, I encountered an issue:
<button type="button" class="btn btn-outline-dark menu-item">
<i class="fas fa-align-center"></i>
</button>
After testing, I observed that Chrome displayed the button twice as large as Mozilla Firefox. In an attempt to resolve this discrepancy, I included Bootstrap Reboot for normalization, but unfortunately, it did not rectify the issue.
Shown below is the entirety of my global styles.scss:
@import "~bootstrap/dist/css/bootstrap-reboot.css";
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~@fortawesome/fontawesome-free/css/all.css";
@import "variables.scss";
html,
body {
height: 100%;
background-color: $gray-light;
}
.menu-item {
font-size: 1.5em;
}
How can I ensure that the font size renders consistently between Firefox and Chrome? While specifying px has been effective, the current trend leans towards using em or rem. Does Bootstrap Reboot overwrite the em?
Although setting font-size: 16px; works, I am uncertain if this is the optimal solution:
html,
body {
height: 100%;
background-color: $gray-light;
font-size: 16px;
}