CODEWITHSUNDEEP
javascriptjqueryhtmlcss
andrsnn
andrsnn

Reputation: 1621

Dynamically change css fontSize with jQuery or css

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?

Upvotes: 0

Views: 1424

Answers (4)

Chris Noffke
Chris Noffke

Reputation: 317

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

Upvotes: 1

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33880

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

Upvotes: 2

Ash
Ash

Reputation: 1422

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 !

Upvotes: 0

Felix
Felix

Reputation: 38112

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 :)

Upvotes: 2

Related Questions