Dynamically change css fontSize with jQuery or css

Question

I have a span that needs its font-size value changed when the window is resized. I do that with the jquery code:

$(window).on('resize', function () {
    y = $(window).height();
    x = $(window).width();

    if (y > 500) {
        $('#testing').css("fontSize", "50px");
    } else if (y < 500) {
        $('#testing').css("fontSize", "10px");
    }

});

and may also do an equivalent with the css code:

 @media screen and (max-height: 500px)
 {
    #testing{
        font-size: 10px;
    }
}

which is actually more efficent? Is one solution more acceptable/common? Is there a better way to do this? And also which way is more acceptable on a mobile device? Is there a better way to do this on a mobile device?

Community · Accepted Answer · 2020-06-20 09:12:55Z

Which is actually more efficent? Is one solution more acceptable/common?

Performance wise, CSS is way better. Using media queries will be faster than processing a function on every resize (which are called numerous times). Of course, you could insert a throttle and call it once when the window didnt resize in a said lapse of time, but even there, media queries will be faster.

Furthermore, Javascript window width may not alway be the same than the CSS media queries. Scrollbar can change value and other things may also affect the width. You have to use a function to check the real width, which consume even more juice. It look like that :

function viewport() {
        //Get the current view port
        var e = window, a = 'inner';
        if (!('innerWidth' in window )) {
            a = 'client';
            e = document.documentElement || document.body;
        }
        return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

The down side of mediaqueries is the support, it is not supported in old IE. But there is of course some libraries that solve this issue.

Is there a better way to do this?

Not really, media queries are fast and efficient.

And also which way is more acceptable on a mobile device? Is there a better way to do this on a mobile device?

Most mobile browser support media queries. You should always use media queries on mobile, it is the prime reason why they exist.

Self shaming promotion and why Javascript media queries could be usefull

There is a case where javascript could be used as media queries. It would be usefull if you want to change the font-size dynamically depend and a screen size with a ratio. Doing that with media queries would be long and painfull since you'd have to do 20~30 media queries depending on the smoothness.

I've created a plugin changing font size depending on the screen for that reason.

https://github.com/kagagnon/Responsive-Font

Felix · Accepted Answer · 2014-02-28 18:46:52Z

2

If you're not worry about cross browser compatibility problem since media queries is CSS3 which is not supported for old browsers such as IE7, IE8... then I'd suggest you to use CSS over javascript.

In the other hand, beside better in handling cross browser compatibility issues, if a task cannot be achieved through CSS then you should probably go with javascript instead.

In short, I'm always prefer CSS than Javascript :)

answered Feb 28, 2014 at 18:46

Felix

38.2k8 gold badges45 silver badges56 bronze badges

4 Comments

andrsnn Over a year ago

I'm a bit confused by your wording. Are you saying that CSS3 is not supported by older browsers, therefore javascript should be used?

Cjmarkham Over a year ago

Media queries cannot be used by certain older browsers. Check here for a list of them http://caniuse.com/css-mediaqueries

andrsnn Over a year ago

nevermind I understand, I guess I could also include a javascript redundancy if the browser is too old?

sinisake Over a year ago

But, i wouldn't do it... if someone use ie7/8 on less than 500px screen size - he should be punished. :) On higher resolutions - even ie7/8 will show content properly, right?

Chris Noffke · Accepted Answer · 2014-02-28 18:55:48Z

1

Depends, using a responsive design will allow you to do much more than just change the font size.

vw units is a good option if you can. See this article

answered Feb 28, 2014 at 18:55

Chris Noffke

3171 silver badge7 bronze badges

1 Comment

Chris Noffke Over a year ago

@Gagnon's answer is much better, but I can't comment on it yet. Neat project.

Ash · Accepted Answer · 2014-02-28 18:52:15Z

0

As my opinion ,You have to prefer JQuery,because the reason is : It is a library that fully support most of devices and auto configure them self as per the environment need ! You have to not think about what the browser need only put a line of code jquery do it in its own way. And place apply your style with respect to device or browser !

answered Feb 28, 2014 at 18:52

Ash

1,42015 silver badges32 bronze badges

Collectives™ on Stack Overflow

Dynamically change css fontSize with jQuery or css

4 Answers 4

Which is actually more efficent? Is one solution more acceptable/common?

Is there a better way to do this?

And also which way is more acceptable on a mobile device? Is there a better way to do this on a mobile device?

Self shaming promotion and why Javascript media queries could be usefull

Comments

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Which is actually more efficent? Is one solution more acceptable/common?

Is there a better way to do this?

And also which way is more acceptable on a mobile device? Is there a better way to do this on a mobile device?

Self shaming promotion and why Javascript media queries could be usefull

Comments

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related