Let's consider a scenario: Imagine on my website footer, at 1024px resolution screen, I have a link that says "Terms & Conditions" among other links. Now, using media queries, if the screen width is reduced to max-width: 320px, I would prefer to shorten the link to just "Terms". There are two approaches to achieve this:
JAVASCRIPT METHOD
HTML
<p class='terms'>Terms & Conditions</p>
JAVASCRIPT
// Determine breakpoint and then use this script:
$('.terms').text('Terms');
CSS METHOD
HTML
<p class='terms'>Terms <span>& Conditions</span></p>
CSS
@media screen and (max-width: 320px) {
.terms span {
display: none;
}
}
Is there a preferred approach for this task? Personally, I find the CSS method to be more efficient.